HTML中一根线带箭头,箭头在中间且指向下方怎么做

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML中一根线带箭头,箭头在中间且指向下方怎么做相关的知识,希望对你有一定的参考价值。

参考技术A 1、切图。
2、字体文件。
3、css画。

<hr> 行之间有一个箭头,在 css 中指向上方

【中文标题】<hr> 行之间有一个箭头,在 css 中指向上方【英文标题】:<hr> line with a arrow in between pointing up in css 【发布时间】:2018-01-07 22:47:01 【问题描述】:

hr 或 div 行,中间有向上箭头。类似这样 (Down arrow)

我试过了。看起来我无法将箭头移动到正确的位置。

我的代码:

div.hr 
    width:100%;
    height: 1px;
    background: #7F7F7F;
    position:relative;
    margin-top:15px;

div.hr:after 
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 0 15px 15px;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: 5px;
    left: 50%;

div.hr:before 
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 0 15px 15px;
    border-color: #7F7F7F transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: 4px;
    left: 50%;
&lt;div class="hr"&gt;&lt;/div&gt;

【问题讨论】:

呃……你有什么问题? 您的问题是什么?你的代码在哪里。, border-width玩太难了?你有例子。 有些问题没有包含代码...你甚至没有包含完整的句子... 请看我的回答和codepen。 【参考方案1】:

这是您提供的示例的修改版本,箭头指向上方,而不是向下。希望这会有所帮助。

演示:Codepen

CSS:

div.hr 
    width:100%;
    height: 1px;
    background: #7F7F7F;
    position:relative;
    margin-top:15px;

div.hr:after 
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 0 15px 15px;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: -14px;
    left: 50%;

div.hr:before 
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 0 15px 15px;
    border-color: #7F7F7F transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: -15px;
    left: 50%;

HTML:

<div class="hr"></div>

【讨论】:

以上是关于HTML中一根线带箭头,箭头在中间且指向下方怎么做的主要内容,如果未能解决你的问题,请参考以下文章

css 方向 箭头

编辑LATEX时想在箭头上下方分别写字,请问各位应该怎么写?

箭头函数this的指向

ppt中箭头链接和返回主页怎么弄

怎么理解这个箭头函数里的this指向

this绑定番外篇之箭头函数绑定