我正在尝试绘制一条带有一个小箭头的线,如图所示.
我无法得到向下箭头.有没有办法可以用html和css做到这一点？
<hr class="line">
CSS
.line{
width:70%;
color:red;
}
谢谢.
解决方法
您可以使用伪元素：after和：before：
.line {
width:70%;
}
.line:after {
content:'';
position: absolute;
border-style: solid;
border-width: 7px 7px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 8px;
left: 45%;
}
.line:before {
content:'';
position: absolute;
border-style: solid;
border-width: 7px 7px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 9px;
left: 45%;
}
<hr class="line">
您可以使用边框宽度来根据需要调整大小.
