网页设计技巧总结:CSS制作网页中的三角形

作者佚名技术来源 CSS技术浏览发布时间 2012-02-02

我们可以改变border不同方向的颜色来找到我们需要的颜色，我们甚至可以通过border-width的修改,创造不同角度的三角形.

是不是上面的通过修改border-width后获得的上面的零件很有意思，可以让我们轻易的节省为创造三角型用掉的那个宝贵的 http请求。
巧思无难事，可能有时候你需要的并不是一个等腰的三角型，比如说我们常见到下面这种图形

那个不是等腰三角形的图形，我们也能通过改变边框的宽度来得到：

1	<div style="border-color: transparent #FF6699 transparent transparent;border-style: solid;border-width: 0 30px 20px 0;height: 0;line-height: 0;width: 0;"></div>

2)通过旋转块状标签角度的方法获得,这种方法需要支持css3属性transform的浏览器支持.
我们经常需要这样的形式:

那我们对这个图形进行分解

那我们先来实现上面分解的图形：

当我们将旋转后的正方形的背景色色值设置为相交盒形相同的色值时,他们就融为一体了.