Mechanics behind the CSS shape

Question

div {
    background:red;
    width:100px;
    height:100px;

}
div:after{
      content: '';
      position: absolute;
      display: block;
      border: 40px solid green;
      border-left-width: 15px;
      border-right-width:15px;
      border-left-color: transparent;
}

I've created this shape many times but I don't quite get how the shape comes about to be by just adjusting left and right border widths, need an explanation so I understand what I'm doing.

A picture of the shape

More to wonder: http://css-tricks.com/the-shapes-of-css/. Good philosopher Nimbuz, because “... the only thing we require to be good philosophers is the faculty of wonder...” ― Jostein Gaarder, Sophie's World — loveNoHate, Oct 03 '14 at 04:35
It is because the `top-border` and `bottom-border` stay 40px. Since the `div` is zero width, the `left-border` starts at the middle. Then it has to lay out like this: http://jsfiddle.net/TRNCFRMCN/zth05v3q/1/. Or something like this... — loveNoHate, Oct 03 '14 at 04:44

Steven Jeffries · Accepted Answer · 2014-10-03T05:00:04.593

Actually, this is rather easy to explain if you think about it.

So, let's start with the basics. How exactly are borders rendered?

First, let's look at a normal border (border: 10px solid black; background: green):

Regular border

Looks just like you'd expect. Now, let's look at it with different colors all around:

Different colored borders

As you can see, the borders are drawn evenly, and at an angle where they join.

The one in your example has border: 40px solid green;. This means that the entire border is 40px wide and green. To emphasize, here's a shape with exaggerated borders. The width and height are 0, so this is all borders:

Exaggerated Borders

At this point, if we make the left border transparent, it will just be green (in my example), or red (in your example).

So, let's do that, then (A) stretch it a bit (make the borders on top and bottom be a bit bigger than the left and right ones).

After that, (B) have the top, right, and bottom borders the same color.

Then, finally, we'll (C) (I also resized it to match your picture), throw it inside of another div. (Basically, the :after tag means place this thing inside the current container, but at the end of it).

Final Results

So, there you have it. Borders in a nutshell.

Example fiddle showing each step.

wow, thanks heaps for the detailed explanation and the illustrations! — eozzy, Oct 03 '14 at 09:04

Alexander O'Mara · Answer 2 · 2014-10-03T04:55:36.747

Your code creates a pseudo block element, with a width and height of 0. To that 0 pixel by 0 pixel block, you add borders.

The corner of a CSS border is at an angle to the two adjoining sides. Each edge of the border normally takes the shape of a trapezoid. In this case, the inner edge is 0 pixels wide, thus producing a triangle on each size.

By manipulating the width of each size, you can change the height of the 4 triangle produced around the edge. Additionally, by setting a side's color to transparent or another color, you can get a triangular cut into the shape.

To help visualize what is going on, check out what happens when width and height are added to the pseudo element and each border side has a different color.

Example

border-top-color: blue;
border-bottom-color: yellow;
width: 10px;
height: 10px;

enter image description here

Mechanics behind the CSS shape

2 Answers2