html向下三角箭头,CSS 实现三角形尖角箭头的实例

无标题文档

.area {

margin:100px auto;

width:300px;

height: 150px;

}

.item {

float:left; clear:both;

margin-bottom:23px;

}

/* 向上的箭头 */

.dot-top {

font-size: 0;

line-height: 0;

border-width: 10px;

border-color: red;

border-top-width: 0;

border-style: dashed;

border-bottom-style: solid;

border-left-color: transparent;

border-right-color: transparent;

}

/* 向右的箭头 */

.dot-right {

font-size: 0;

line-height: 0;

border-width: 10px;

border-color: red;

border-right-width: 0;

border-style: dashed;

border-left-style: solid;

border-top-color: transparent;

border-bottom-color: transparent;

}

/* 向下的箭头 */

.dot-bottom {

font-size: 0;

line-height: 0;

border-width: 10px;

border-color: red;

border-bottom-width: 0;

border-style: dashed;

border-top-style: solid;

border-left-color: transparent;

border-right-color: transparent;

}

/* 向左的箭头 */

.dot-left {

font-size: 0;

line-height: 0;

border-width: 10px;

border-color: red;

border-left-width: 0;

border-style: dashed;

border-right-style: solid;

border-top-color: transparent;

border-bottom-color: transparent;

}

另外我后来发现通过设置不同方向边线宽度，还可以调整斜角的角度；修改bord-width的值，修改三角形的大小，这个很简单大家自己修改尝试下吧就不赘述啦