如何使用纯CSS构建三角形

来源：互联网发布：gdi 矩阵变换编辑：程序博客网时间：2024/06/05 11:21

如何使用纯CSS样式构建一个三角形。

预备知识CSS border属性

　　众所周知，css3并没有提供类似斜线这样的属性，那么如何使用css样式来创建一个三角形呢？假设有一个矩形，当他的边框宽度扩大，并且给每条边设置不同的颜色，那么在两两交界的地方就会形成一个斜边，得到如下这样一张图片：
　　这里写图片描述
代码是这样的：

.triangle {    width: 100px;    height: 100px;    border: 25px solid rgba(255, 0, 0,1);    border-left: 25px solid rgba(255, 255, 0,1);    border-right: 25px solid rgba(255, 0, 255,1);    border-top: 25px solid rgba(0, 255, 255,1);}

可以想象，当我们把边框逐渐扩大，内容区域逐渐缩小的时候最终会得到如下图这样的四个三角形：
这里写图片描述
代码如下：

.triangle {    width: 0px;    height: 0px;    border: 125px solid rgba(255, 0, 0,1);    border-left: 125px solid rgba(255, 255, 0,1);    border-right: 125px solid rgba(255, 0, 255,1);    border-top: 125px solid rgba(0, 255, 255,1);}

接下来，只要讲其它边的颜色设置为透明，只保留一个边的颜色，就可以得到我们想要的三角形啦。
这里写图片描述
最终效果代码如下：

.triangle{    width: 0;    height: 0;    border: 25px solid rgba(255, 0, 0,1);    border-left: 25px solid  rgba(255, 255, 0,0);    border-right: 25px solid  rgba(255, 255, 255,0);    border-top: 25px solid  rgba(0, 255, 255,0);}

改变四条边的长度，还可以得到不同形状的三角形，感觉试试吧~

知识来源于LEA VEROU的著作CSS SECRETS，一本很好的CSS书籍，强烈推荐~

0 0