diff --git a/public/css/app.css b/public/css/app.css index e6f5645..9b56008 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -261,3 +261,45 @@ input[type="radio"] { height: 149px; background: url(../img/fork.png); } + +.arrow_box { + position: relative; + background: #88b7d5; + border: 4px solid #c2e1f5; +} +.arrow_box:before { + border-color: rgba(194, 225, 245, 0) !important; + border-bottom-color: #c2e1f5 !important; + border-width: 36px !important; + margin-left: -36px; +} +.arrow_box:after, .arrow_box:before { + bottom: 100%; + left: 50%; + border: solid transparent; + content: ""; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} +.arrow_box:after { + border-color: rgba(136, 183, 213, 0); + border-bottom-color: #88b7d5; + border-width: 30px; + margin-left: -30px; +} + + +/* Iphone */ + +@media only screen and (max-width: 768px) { + .arrow_box::before { + content: ""; + margin-bottom: 4px; +} +.arrow_box::after { + content: ""; + margin-bottom: 4px; +} +} \ No newline at end of file diff --git a/public/dist/index.html b/public/dist/index.html new file mode 100644 index 0000000..56ee423 --- /dev/null +++ b/public/dist/index.html @@ -0,0 +1,102 @@ + + + + + CSS Arrow Please - By Simon Hoejberg - @shojberg + + + + + + + + + +
+
+ Create and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like. +
+
+
+
+

css arrow please!

+
+
+
+

Arrow configuration

+
+
    +
  1. + + + + + +
    2. +
+
    +
  1. + + em +
    2. +
  2. + + +
    3. +
+
    +
  1. + + em +
    2. +
  2. + + +
    3. +
+
+
+
+ +
+ +
+
+ + + Fork me on Github + + +
+ + + + + + + + + + + diff --git a/public/index.html b/public/index.html index e55d3b5..56ee423 100644 --- a/public/index.html +++ b/public/index.html @@ -41,7 +41,7 @@

Arrow configuration

  1. - px + em
  2. @@ -51,7 +51,7 @@

    Arrow configuration

    1. - px + em
    2. @@ -86,7 +86,7 @@

      Arrow configuration

      - + // twitter