Question

下面是向下箭头的代码。我试图让它向上但直到现在都没有成功。

任何人都可以帮我吗？

＆＃13;

.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%;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <hr class="line">

</body>

</html>

＆＃13;

我只是想显示hr标签之间的向上箭头。

https://www.w3schools.com/code/tryit.asp?filename=FG5LJQ77HPXS

Answer 1

就是这样，您应该只使用border-width稍微玩一下，然后更正top和left位置

向上箭头

＆＃13;

.up {
  width: 70%;
}

.up:after {

  content: '';
  position: absolute;
  border-style: solid;
  border-width: 0px 7px 7px 7px;
  border-color: white transparent;
  display: block;
  width: 0;
  z-index: 1;
  top: 3px;
  left: 45%;
}

.up:before {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 0px 7px 7px 7px;
  border-color: #7F7F7F transparent;
  display: block;
  width: 0;
  z-index: 1;
  top: 2px;
  left: 45%;
}

＆＃13;

<div class="up"></div>

＆＃13;

向左箭头

＆＃13;

.up {
  width: 70%;
}

.up:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 7px 7px 7px 0px;
  border-color: transparent white;
  display: block;
  width: 0;
  z-index: 1;
  top: 3px;
  left: 45%;
}

.up:before {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 7px 7px 7px 0px;
  border-color: transparent #7F7F7F;
  display: block;
  width: 0;
  z-index: 1;
  top: 3px;
  left: 44.8%;
}

＆＃13;

<div class="up"></div>

＆＃13;

向右箭头

＆＃13;

.up {
  width: 70%;
}

.up:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 7px 0px 7px 7px;
  border-color: transparent white;
  display: block;
  width: 0;
  z-index: 1;
  top: 3px;
  left: 45%;
}

.up:before {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 7px 0px 7px 7px;
  border-color: transparent #7F7F7F;
  display: block;
  width: 0;
  z-index: 1;
  top: 3px;
  left: 45.1%;
}

＆＃13;

<div class="up"></div>

＆＃13;

向下箭头

＆＃13;

.up {
  width: 70%;
}

.up:after {

  content: '';
  position: absolute;
  border-style: solid;
  border-width: 7px 7px 0px 7px;
  border-color: white transparent;
  display: block;
  width: 0;
  z-index: 1;
  top: 3px;
  left: 45%;
}

.up:before {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 7px 7px 0px 7px;
  border-color: #7F7F7F transparent;
  display: block;
  width: 0;
  z-index: 1;
  top: 4px;
  left: 45%;
}

＆＃13;

<div class="up"></div>

＆＃13;

工作解决方案

＆＃13;

.line {
  width: 70%;
}

.line:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 0px 7px 7px 7px;
  border-color: #FFFFFF transparent;
  display: block;
  width: 0;
  z-index: 1;
  top: 3px;
  left: 45%;
}

.line:before {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 0px 7px 7px 7px;
  border-color: #7F7F7F transparent;
  display: block;
  width: 0;
  z-index: 1;
  top: 2px;
  left: 45%;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>

</head>

<body>

  <hr class="line">

</body>

</html>

＆＃13;

Answer 2

让向上箭头使用此代码

＆＃13;

 for (i = 0; n < 3; i++) {

＆＃13;

.line {
        width:70%;
    }
    .line:after {
        content:'';
        position: absolute;
        border-style: solid;
        border-width:  0px 7px  7px 7px;
        border-color: #FFFFFF transparent;
        display: block;
        width: 0;
        z-index: 1;
        top: 2px;
        left: 45%;
    }
    .line:before {
        content:'';
        position: absolute;
        border-style: solid;
        border-width: 0px 7px  7px 7px;
        border-color: #7F7F7F transparent;
        display: block;
        width: 0;
        z-index: 1;
        top: 1px;
        left: 45%;
    }

＆＃13;

Answer 3

尝试使用你的代码，最后我做了..我的代码......！

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<hr class="line">

</body>
</html>

＆＃13;

Answer 4

你的意思是这样吗？

.line {
    position: relative;
    width: 70%;
}
.line:after {
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 0px 7px 7px 7px;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: -6px;
    left: 45%;
}
.line:before {
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 0px 7px 7px 7px;
    border-color: #7F7F7F transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: -7px;
    left: 45%;
}

Answer 5

首先，我们通过将:after和:before的{{1}}从border-width更改为0 7px 7px来制作向上箭头。然后我们更新了顶部位置，以便它适合hr元素:)

7px 7px 0

    .line {
        width:70%;
    }
    .line:after {
        content:'';
        position: absolute;
        border-style: solid;
        border-width: 0 7px 7px;
        border-color: #FFFFFF transparent;
        display: block;
        width: 0;
        z-index: 1;
        top: 3px;
        left: 45%;
    }
    .line:before {
        content:'';
        position: absolute;
        border-style: solid;
        border-width: 0 7px 7px;
        border-color: #7F7F7F transparent;
        display: block;
        width: 0;
        z-index: 1;
        top: 2px;
        left: 45%;
    }

带向上箭头的hr元素

5 个答案: