CSS怎么绘制三角形和箭头
CSS怎么绘制三角形和箭头
本篇内容主要讲解“CSS怎么绘制三角形和箭头”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS怎么绘制三角形和箭头”吧!
先来看看这段代码:
/**css*/.d1{width:0;height:0;border:100pxsolid#339933;}/**html*/<divclass="d1"></div>/**css*/.d2{width:0;height:0;border-width:100px;border-style:solid;border-color:#FFCCCC#0099CC#996699#339933;}/**html*/<divclass="d2"></div>
看了这两段代码，和效果图，是不是有一点眉目了？原来画三角形，只需要用元素的`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:#FFCCCCtransparenttransparenttransparent;}/**html*/<divclass="d3"></div>
向左三角形
/**css*/.d4{margin-left:110px;float:left;width:0;height:0;border-width:100px;border-style:solid;border-color:transparent#0099CCtransparenttransparent;}/**html*/<divclass="d4"></div>
这里的`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#0099CCtransparenttransparent;transform:rotate(90deg);/*顺时针旋转90°*/}/**html*/<divclass="d4"></div>
箭头示例
向左箭头
/**css*/.left{position:absolute;}.left:before,.left:after{position:absolute;content:'';border-top:10pxtransparentdashed;border-left:10pxtransparentdashed;border-bottom:10pxtransparentdashed;border-right:10px#fffsolid;}.left:before{border-right:10px#0099CCsolid;}.left:after{left:1px;/*覆盖并错开1px*/border-right:10px#fffsolid;}/**html*/<iclass="left"></div>
CSS绘制三角形和箭头，不用再用图片了
是不是发现箭头和三角形是一样的呢？发现了，说明你已经懂了，箭头其实就是2个三角形，然后用白色三角形覆盖蓝色三角形，并且错开1px，刚刚好就形成了箭头。这就和《最强大脑》层叠消融项目是一样的。
向上箭头
/**css*/.top{position:absolute;}.top:before,.top:after{position:absolute;content:'';border-top:10pxtransparentdashed;border-left:10pxtransparentdashed;border-right:10pxtransparentdashed;border-bottom:10px#fffsolid;}.top:before{border-bottom:10px#0099CCsolid;}.top:after{top:1px;/*覆盖并错开1px*/border-bottom:10px#fffsolid;}/**html*/<iclass="top"></div>
通过上面两个例子，我想剩余两个方向的箭头，你应该可以搞定了，就是不能，那就会一种就好了，然后通过`transform:rotate(90deg)`，来旋转角度，还是能搞定各个方向的箭头。
到此，相信大家对“CSS怎么绘制三角形和箭头”有了更深的了解，不妨来实际操作一番吧！这里是恰卡编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
