Drawing a triangle in CSS

This question already has an answer here:

How do CSS triangles work? 18 answers

---

CSS borders actually have diagonal edges.

Illustration:

-------/
|       |
|       |
|       |
/-------

So border-right actually looks like this:

/
|
|
|

With height:0px , border-right will also have no height thus it will look like this:

/

Now if you use the following css:

#triangle-left{ 
    width: 0; 
    height: 0; 
    border-top: 50px solid transparent; /* this will fill the top gap */
    border-right: 100px solid red; /* this will be the red triangle */
    border-bottom: 50px solid transparent; /* this will fill the bottom gap */
}

You'll get:

A triangle pointing left.

链接地址: http://www.djcxy.com/p/89492.html

上一篇: HTML / CSS用箭头底部创建Div

下一篇: 在CSS中绘制三角形