带有向下箭头的HTML行

时间:2014-10-13 17:36:56

标签: html css html5

我正在尝试绘制一条带有向下箭头的小箭头的线条。

enter image description here

我无法获得向下箭头。有没有办法可以用html和css来做呢?

HTML

  <hr class="line">

CSS

.line{
width:70%;
color:red;
}

http://jsfiddle.net/4eL39sm1/

感谢。

1 个答案:

答案 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来根据需要调整大小。