Today's Question:  What weekend projects have you created?        GIVE A SHOUT

Technical Article => Web =>  CSS

Magic CSS shape

  Neo      2012-04-20 12:56:22      4,632    1

There is a question on StackOverflow which states that someone finds a CSS sample on http://css-tricks.com/examples/ShapesOfCSS/  , the sample shows a triangle created with pure CSS.

The source code is :

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

The question is how these few lines can create a triangle?

Next we give the answer and the detail illustration to this question

We need to consider the Box Model of HTML, here we see content and padding as content and we ignore margin, then the box model can be seen as

The center area is content and then 4 borders, each border has width. Here if we don't set border-top, then the shape is

If we set the HTML element's width to 0, the shape becomes

If we also set the HTML element's height to 0, the shape becomes

Finally, we set the left and right border as transparent. We get the triangle we want:

Frankly, this is just a trick in CSS, but it also shows the power of CSS. Also you can find many other shapes on http://css-tricks.com/examples/ShapesOfCSS/

Author : Source : http://coolshell.cn/articles/6913.html#more-6913

CSS TRIANGLE BOX MODEL BORDER

Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr 

  RELATED


  1 COMMENT


Henry Ho [Reply]@ 2012-04-23 14:56:20
Isn't using the actual character better? http://www.fileformat.info/info/unicode/char/25b2/index.htm

  WRITE ARTICLE

How Android will ruin a day

By sonic0002