带有向下箭头的HTML行 [英] HTML line with a downward arrow

问题描述

我试图画一条带有一个小箭头的线，如图所示。

我无法获得向下箭头。有没有办法使用html和css？

HTML

 < hr class =line> 
  

CSS

  .line {
 width：70％; 
 color：red; 
} 
  

http://jsfiddle.net/4eL39sm1/

感谢。

c>和：之前可以使用伪元素： ：

  .line {width：70％;} line：after {content：''; position：absolute; border-style：solid; border-width：7px 7px 0; border-color：#FFFFFF transparent;显示：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;显示：block; width：0; z-index：1; top：9px; left：45％;}  

 < hr class = line>  

> border-width 可根据需要调整大小。

I am trying to draw a line with a small arrow pointing down as in the image attached.

I have not been able to get the downward arrow. Is there a way I can do it using html and css?

HTML

  <hr class="line">

CSS

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

http://jsfiddle.net/4eL39sm1/

Thanks.

解决方案

You can use pseudo-elements :after and :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">

You can play with border-width to adjust the size to your needs.

这篇关于带有向下箭头的HTML行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！