html 两个向下的箭头,html – 指向下方之间的箭头线

您可以修改为：

div.hr {

width:70%;

height: 1px;

background: #7F7F7F;

}

div.hr:after {

content:'';

position: absolute;

border-style: solid;

border-width: 15px 15px 0;

border-color: #FFFFFF transparent;

display: block;

width: 0;

z-index: 1;

top: 8px;

left: 35%;

}

div.hr:before {

content:'';

position: absolute;

border-style: solid;

border-width: 15px 15px 0;

border-color: #7F7F7F transparent;

display: block;

width: 0;

z-index: 1;

top: 9px;

left: 35%;

}

如您所见,您不必从伪元素中删除top.你唯一需要添加的是高度：1px和背景颜色与第二个三角形相同.

此外,如果您想在其他元素中使用它并与中心对齐,您可以使用：

div.hr {

width:70%;

height: 1px;

background: #7F7F7F;

position: relative;

margin: 0 auto;

}

div.hr:after {

content:'';

position: absolute;

border-style: solid;

border-width: 15px 15px 0;

border-color: #FFFFFF transparent;

display: block;

width: 0;

z-index: 1;

left: 50%;

}

div.hr:before {

content:'';

position: absolute;

border-style: solid;

border-width: 15px 15px 0;

border-color: #7F7F7F transparent;

display: block;

width: 0;

z-index: 1;

left: 50%;

}

附：顺便说一下,我是第一篇文章中回答的人:)

在与@ user3861559交谈后,我为他的情况创建了一种方法.我使用具有相同结果的嵌套div而不是伪元素：

div.hr {

width:70%;

height: 1px;

background: #7F7F7F;

}

div.after {

position: absolute;

border-style: solid;

border-width: 15px 15px 0;

border-color: #FFFFFF transparent;

display: block;

width: 0;

z-index: 1;

top: 8px;

left: 35%;

}

div.before {

position: absolute;

border-style: solid;

border-width: 15px 15px 0;

border-color: #7F7F7F transparent;

display: block;

width: 0;

z-index: 1;

top: 9px;

left: 35%;

}