用HTML和CSS制作三角形

我们知道,HTML里的元素都是矩形的,那么,有没有办法用HTML和CSS制作三角形呢?
当然有了,这可难不倒聪明的设计师

<div style="border-top: 60px solid transparent; border-right: 60px solid green; border-bottom: 60px solid transparent;
    height: 0px; width: 0px;">
</div>
<div style="border-top: 20px solid transparent; height: 0px; border-bottom: 20px solid transparent;
    border-left: 40px solid yellow; width: 0px;">
</div>


预览结果如图所示,是不是很神奇,真的做出了三角形,那么是如何做的呢,看我一步步分解

<div style="border: 40px solid blue; height: 100px; width: 100px;"></div>


我想你一定见过这样的图形,没错,这就是一个加了边框的矩形。那这和三角形有什么关系呢,接着往下看吧

<div style="border-top: 40px solid red; border-right: 40px solid green; border-bottom: 40px solid blue;
    border-left: 40px solid yellow; height: 100px; width: 100px;">
</div>


怎么样,我把每条边框都用不同的颜色表示出来,是不是有点感觉了。接着,再往下看

<div style="border-top: 40px solid red; border-right: 40px solid green; border-bottom: 40px solid blue;
    border-left: 40px solid yellow; height: 0; width: 0;">
</div>


怎么样,是不是有4个三角形出现了,那么,如果把三条边颜色设置为transparent,那么是不是就只剩下一个三角形了,就和第一个示例一样了。

现在,再看个实际应用的例子吧。这里用到了CSS3的一个伪类:before,关于它的具体用法,请百度一下。当然这里也可以不用伪类,我这样使用,只是为了告诉你多一种方法而已,我相信聪明的你,可以用别的方式作出更帮的效果的

<div style="margin:0 auto;width:200px;height:150px;border:1px solid #999;background:#999">这是一个信息提示框</div>
div:before{ border-bottom: 20px solid transparent;
    border-right: 20px solid #999;
    border-top: 20px solid transparent;
    content: "";
    display: inline-block;
    position: relative;
    left:-20px;
    top: 20px;}


怎么样,是不是很简单,你也学会了吧,是不是很有意思呢

这里只是抛砖引玉,还有更多更棒的例子,请猛击这里