首页 > 代码库 > css三角形绘制
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);}
总结：
再满足兼容性的情况下，通过样式制作三角形，比用图形制作三角形会来的简单、方便一些。比如在网页制作中，要实现下拉框上的向下图标，我们就可以直接用样式制作。又如做"更多"按钮后的向右图标，我们就可以用线性的三角形的做法。
css三角形绘制
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。