create css3 shape using border properties

Question

I found this code snippets at http://www.css3shapes.com/, but I can't understand the logic behind it. I mean I know the before and after selector's function. What I'm confused with is why we have { height:0; width:40px; } in the code. If anyone could give a full explanation on this code, it will be greatly appreciated.

#octagon {
   width: 100px; 
   height: 100px; 
   background: blue;
}
#octagon:before {
   height: 0;
   width: 40px;
   content:"";
   position: absolute; 
   border-bottom: 30px solid blue;
   border-left: 30px solid white; 
   border-right: 30px solid white; 
}
#octagon:after {
   height: 0;
   width: 40px;
   content:"";
   position: absolute; 
   border-top: 30px solid blue; 
   border-left: 30px solid white;  
   border-right: 30px solid white; 
   margin: 70px 0 0 0;
}

Richard Inglis · Accepted Answer · 2013-08-24 22:31:39Z

4

If you change a few of the colours you can see what's going on: the 'after' bit is like the top part of a bevelled picture frame: enter image description here The top of the frame is red, the sides are green & blue, but there's no bottom, and the size of the 'picture' in the frame is width 40, height zero (ie the line along the bottom edge of the red bit).

enter image description here

If you add the missing bottom, and make the height 40, you can see the entire frame:

enter image description here

edited Aug 24, 2013 at 22:31

answered Aug 24, 2013 at 22:17

Richard Inglis

5,9682 gold badges36 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeffpowrs · Accepted Answer · 2013-08-24 22:21:10Z

0

It's a trick to force css to render a triangular shape. Check out #octagon:before { ... }

The border-bottom-width determines the height of the element. The borders on the sides add to the defined width giving the shape a width of 100px.

You can imagine the height: 0 acting like a vanishing point in the distance. Both of the sides move toward it but in this case never reach it since the width (100) is greater than the height 30.

The difference between the triangle and the octagon is the additional width:

width: 40px;

Play with his example: http://jsfiddle.net/mXTrG/ The gray is the side borders and the blue is the bottom border.

Does that make sense? Let me know if you have any questions!

edited Aug 24, 2013 at 22:21

answered Aug 24, 2013 at 22:10

Jeffpowrs

4,5904 gold badges33 silver badges49 bronze badges

Collectives™ on Stack Overflow

create css3 shape using border properties

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related