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%;
<div class="hr"></div>
【问题讨论】:
呃……你有什么问题? 您的问题是什么?你的代码在哪里。,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中一根线带箭头,箭头在中间且指向下方怎么做的主要内容,如果未能解决你的问题,请参考以下文章