我正在尝试绘制一条带有向下箭头的小箭头的线条。
我无法获得向下箭头。有没有办法可以用html和css来做呢?
HTML
<hr class="line">
CSS
.line{
width:70%;
color:red;
}
感谢。
答案 0 :(得分:11)
您可以使用伪元素: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">
您可以使用border-width
来根据需要调整大小。