3

I've used this on my website, but I'm baffled how it generates the arrow using CSS.

There doesn't appear to be anything that screams "shape generation" to me within the CSS.

The default CSS shown on their website is:

.arrow_box {
    position: relative;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
    bottom: 100%;
    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;
    left: 50%;
    margin-left: -30px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 36px;
    left: 50%;
    margin-left: -36px;
}

How does it create an arrow?

Thanks

Uyghur Lives Matter
  • 18,820
  • 42
  • 108
  • 144
Luke
  • 22,826
  • 31
  • 110
  • 193
  • It's all those selectors combined to make an arrow. A quick Google search will present all the answers you need :) – Kyle Jun 27 '13 at 14:04
  • 2
    Essentially it is done by manipulating borders. Borders meet each other at 45 degree angles and can be transparent which allows you to achieve a lot of interesting shapes and effects by playing with various border sizes and transparency. Check out the answers to this question for details: http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work?rq=1 – Ennui Jun 27 '13 at 14:05
  • 1
    Possible duplicate of [How do CSS triangles work?](https://stackoverflow.com/questions/7073484/how-do-css-triangles-work) – Uyghur Lives Matter Aug 14 '18 at 17:14
  • Click on "View Page Source" if you are using Google Chrome as your browser. If it is I.E. - it is a similar button. Here are links to the JavaScript that does it. I have obtained this link to the javascript from the HTML page source. I have not gone through it, though, but it is at: [http://www.cssarrowplease.com/js/cssarrowplease.js](http://www.cssarrowplease.com/js/cssarrowplease.js) I could go through it, but I simply will not touch anything that says jQuery on it myself. I'm big into CSS/HTML (and of course .js) - but I do translations - and making things bounce around on a screen (as a co –  Aug 14 '18 at 17:25

1 Answers1

0

It uses "before" and "after" CSS pseudo-elements http://www.w3schools.com/css/css_pseudo_elements.asp

Igor Krupitsky
  • 787
  • 6
  • 9