我们知道，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;}

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

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