CSS怎么绘制三角形和箭头

本篇内容主要讲解"CSS怎么绘制三角形和箭头"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"CSS怎么绘制三角形和箭头"吧!

先来看看这段代码:

/**css*/.d1{ width: 0;  height: 0;  border: 100px solid #339933;}/**html*/
/**css*/.d2{ width: 0;  height: 0; border-width: 100px; border-style: solid; border-color:#FFCCCC #0099CC #996699 #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*/