css三角形绘制

三角形演变：

1、将一个块元素的宽、高都设置为0，再设置边框样式，得如下效果图(绿色部分)：

样式：

{width: 0;height: 0;border: 35px solid #7de87d;}

通过此样式得到的是一个正方形。

 

2、将正方形的左右边框设置成其他颜色，如：

{
width: 0;
height: 0;
border-left: 35px solid #ff9900;
border-right: 35px solid #ff9900;
border-top: 35px solid #7de87d;
border-bottom: 35px solid #7de87d;
}

效果图：

给块元素添加设置了其他颜色后，块元素被左右的三角形切割了。

 

3、如果再将左右两边设置成透明，又会是什么效果呢？

样式：

{
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-top: 35px solid #7de87d;
border-bottom: 35px solid #7de87d;
}

最终看到的是一个像漏斗形状的图形，如果将边框顶部去掉，那我们就可以直接得到向上的三角形了，如图：

样式：

{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #7de87d;
}

 

其他方向的三角形：

向下三角形样式：

{
width: 0;
height: 0;
border-top: 50px solid #7de87d;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

 

向左样式：

{
width: 0;
height: 0;
border-right: 40px solid #7de87d;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
}

 

向右样式：

{
width: 0;
height: 0;
border-left: 40px solid #7de87d;
border-bottom: 40px solid transparent;
border-top: 40px solid transparent;
}

 

左下三角形样式：

{
width: 0;
height: 0;
border-bottom: 50px solid #7de87d;
border-right: 50px solid transparent;
}

 

右下三角形样式：

{
width: 0;
height: 0;
border-bottom: 50px solid #7de87d;
border-left: 50px solid transparent;
}

 

左上三角形样式：

{
width: 0;
height: 0;
border-top: 50px solid #7de87d;
border-right: 50px solid transparent;
}

 

右上三角形样式：

{
width: 0;
height: 0;
border-top: 50px solid #7de87d;
border-left: 50px solid transparent;
}

 

线性三角形：

除了上面给到的有背景颜色的三角形外，如果需要线性形状的三角形该怎么做呢？

这里就需要用到css3的变换(transform)属性了，如下样式：

{
width: 50px;
height: 50px;
border-top: 2px solid #7de87d;
border-right: 2px solid #7de87d;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}

给块元素设置对角边框样式，再用transform属性旋转到对应角度就可以了，效果图：

 

 其他线性三角形：

向下样式：

{
width: 50px;
height: 50px;
border-top: 2px solid #7de87d;
border-right: 2px solid #7de87d;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}

 

向左样式：

{
width: 50px;
height: 50px;
border-top: 2px solid #7de87d;
border-right: 2px solid #7de87d;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}

 

向右样式：

{
width: 50px;
height: 50px;
border-top: 2px solid #7de87d;
border-right: 2px solid #7de87d;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

 

 总结：

再满足兼容性的情况下，通过样式制作三角形，比用图形制作三角形会来的简单、方便一些。比如在网页制作中，要实现下拉框上的向下图标，我们就可以直接用样式制作。又如做"更多"按钮后的向右图标，我们就可以用线性的三角形的做法。