Creating a triangle out of div with css logic explanation?

Question

I recently worked on creating an element with some text inside it, but it has to be flag based shaped. I googled and found below nice css to achieve it. They basically created small triangles out of div(pointing to left/right/top/bottom) using css and attaching it with adjacent div.

However,I did not find any answers with the logic mentioned thus making me little confused about the triangle creation out of div using CSS.

I wanted to know how that css works, specifically for arrow-left class used below.

HTML:

<div class='element'>
   <p>OFFER</p>
   <div class="arrow-left"></div>
</div>

CSS:

.element{
  background-color:#E47911;
  display:inline-block;
  position:relative;
  padding:2px 15px 2px 10px;
  color:white;
  line-height:18px;
}
p{
  font-size:10px;
  margin:0;
}
.arrow-left {
   width: 0; 
   height: 0; 
   border-top: 11px solid transparent;
   border-bottom: 11px solid transparent;
   border-right: 11px solid white;
   display:inline-block;
   position:absolute;
   top:0px;
   right:0px;
 }

Here's the codepen link: http://codepen.io/anon/pen/JGvBpN

Any pointers is much appreciated! Thanks.

mczepiel · Answer 1 · 2016-01-28T18:07:59.700

It doesn't create a triangle so much as it appears to given how border intersections are rendered at an angle.

.arrow-left {
 width: 0; /* unnecessary, but does override any unexpected width  */
 height: 0; /* unnecessary, but does override any unexpected height */

 /* These set up the intersecting borders, set each one to a different color to see the borders forming the "triangle" e.g. red, green, blue  */
 border-top: 11px solid transparent;
 border-bottom: 11px solid transparent;
 border-right: 11px solid white;

 display:inline-block; /* unnecessary, you're taking the elemtn out of the document flow when you absolute potiion it and the div id a block level element anyway, but to correctly have a border you'll need this so it's a decent safeguard */

 /* this takes the element out of the document flow and positions it absolutely within the nearest positioning parent, in this case, the relatively positioned parent */
 position:absolute;

 /* this moves it to the top right edges of the positioning parent*/
 top:0px;
 right:0px;

}

Here'es an illustration of the box in chrome's dev tools, pulled out of position to make the effect of what's going on made more obvious:

And here it is with positioning restored:

Note that the part you think is transparent is actually opaque so this isn't masking any part of the orange checkout block; it would be obvious that you drew a white part there if the background of the underlying page were not also white.

For what it's worth, it may be worth looking into using an image or SVG and CSS masking to actually "cut" part of the button out, but you'll need to check the user agent support for your needs or try some work arounds.

Creating a triangle out of div with css logic explanation?

1 Answers1