扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇内容主要讲解“CSS怎么绘制三角形和箭头”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS怎么绘制三角形和箭头”吧!
成都创新互联公司专注于万安网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供万安营销型网站建设，万安网站制作、万安网页设计、万安网站官网定制、成都小程序开发服务，打造万安网络公司原创品牌,更为您提供万安网站排名全网营销落地服务。
先来看看这段代码:
/**css*/
.d1{
width: 0;
height: 0;
border: 100px solid #339933;
}
/**html*/
看了这两段代码，和效果图，是不是有一点眉目了？原来画三角形，只需要用元素的`border`来控制就可以了，`border-with`控制大小， `border-style`控制样式（实线、虚线等）， `border-color`控制颜色，分上、右、下、左
向下三角形
/**css*/
.d3{
margin-left: 10px;
float: left;
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color:#FFCCCC transparent transparent transparent;
}
/**html*/
向左三角形
/**css*/
.d4{
margin-left: 110px;
float: left;
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent #0099CC transparent transparent;
}
/**html*/
这里的`transparent`是透明的意思
接下来两种就留给聪明的你了，相信你可以的，动手才知道原来这么简单！
其实我们还可以通过，一种样式，来实现不能角度的三角形，那就是利用CSS3里面的旋转`transform:rotate(90deg)`。
/**css*/
.d4{
margin-left: 110px;
float: left;
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent #0099CC transparent transparent;
transform: rotate(90deg); /*顺时针旋转90°*/
}
/**html*/
向左箭头
/**css*/
.left{
position: absolute;
}
.left:before,.left:after{
position: absolute;
content: '';
border-top: 10px transparent dashed;
border-left: 10px transparent dashed;
border-bottom: 10px transparent dashed;
border-right: 10px #fff solid;
}
.left:before{
border-right: 10px #0099CC solid;
}
.left:after{
left: 1px; /*覆盖并错开1px*/
border-right: 10px #fff solid;
}
/**html*/
CSS绘制三角形和箭头，不用再用图片了
是不是发现箭头和三角形是一样的呢？发现了，说明你已经懂了，箭头其实就是2个三角形，然后用白色三角形覆盖蓝色三角形，并且错开1px，刚刚好就形成了箭头。这就和《最强大脑》层叠消融项目是一样的。
向上箭头
/**css*/
.top{
position: absolute;
}
.top:before,.top:after{
position: absolute;
content: '';
border-top: 10px transparent dashed;
border-left: 10px transparent dashed;
border-right: 10px transparent dashed;
border-bottom: 10px #fff solid;
}
.top:before{
border-bottom: 10px #0099CC solid;
}
.top:after{
top: 1px; /*覆盖并错开1px*/
border-bottom: 10px #fff solid;
}
/**html*/
通过上面两个例子，我想剩余两个方向的箭头，你应该可以搞定了，就是不能，那就会一种就好了，然后通过`transform:rotate(90deg)`，来旋转角度，还是能搞定各个方向的箭头。
到此，相信大家对“CSS怎么绘制三角形和箭头”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网