drawing triangle using CSS

This question already has an answer here:

How do CSS triangles work? 18 answers

---

Adjacent borders can not overlap. To draw the borders, the browser draws an invisible line from the outer corner of the border to the inner corner of the border. Each border applies to only one side of this line.

So, if you set

div
{
    border: none;
    border-bottom: 4px solid black;
}

you get a rectangular border, because your right and left borders have 0 width. So the line from the outer corner of the border to the inner corner of the border is a vertical line.

But if you do

div
{
    border: 4px solid transparent;
    border-top: none;
    border-bottom: 4px solid black;
    height: 0px;
    width: 0px;
}

Now there are left and right borders, even if you can't see them. So the 'invisible line', goes up 4 pixels and right 4 pixels (for the left bottom corner). On the upper side the browser doesn't pain, and on the down side it paints black. If the element has 0 height (for left / right borders) or 0 width (for top / bottom borders), then the inner corners of the border overlap, and you get that triangle.

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

上一篇: CSS边界三角点正确

下一篇: 使用CSS绘制三角形