html三角形-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*/

CSS勾勒出三角形和箭头，不再需要使用图片

看完这两段代码和效果图，你是不是有点眉头紧锁呢？本来，画一个三角形只需要使用元素的“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勾勒出三角形和箭头，不再需要使用图片

左三角形

/**css*/
.d4{
 margin-left: 110px;
 float: left;
 width: 0; 
 height: 0;
 border-width: 100px;
 border-style: solid;
 border-color: transparent #0099CC transparent transparent;
}
/**html*/

CSS勾勒出三角形和箭头，不再需要使用图片

这里的“透明”是透明的意思

挑两种，留给聪明的你吧。 我相信你能做到。 只有你做了才知道原来这么简单！

虽然我们也可以通过样式来实现不能成角度的三角形html三角形，那就是使用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勾勒出三角形和箭头，不再需要使用图片

箭头示例

左箭头

/**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*/
.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*/