如何使用 :after 在元素后创建箭头形状

Question

我用 css 创建了一个六边形，效果很好。现在，我正在尝试创建一个箭头以设置在六边形下方。在我的尝试中，我使用了伪元素 :after 来尝试将线定位在六边形之后。由于某种原因，该线出现在六边形的顶部。

这让我想到下一期，在展示位置之外。我将如何使用 :after 创建箭头类型的线（见下图）。有可能吗？

有更好的方法吗？

#hexGrid {
    width: 60%;
 position: absolute;
 margin: 0 auto;
    padding: 0;
 right: 5%;
 top: 35%;
}
#hexGrid li {
    list-style-type: none;
    position: relative;
    float: right;
    width: 27.85714285714286%;
    padding: 0 0 32.16760145166612% 0;
    -o-transform: rotate(-60deg) skewY(30deg);
    -moz-transform: rotate(-60deg) skewY(30deg);
    -webkit-transform: rotate(-60deg) skewY(30deg);
    -ms-transform: rotate(-60deg) skewY(30deg);
    transform: rotate(-60deg) skewY(30deg);
    overflow: hidden;
    visibility: hidden;
}
#hexGrid li * {
    visibility: visible;
}
#hexGrid li .hexagon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2f2f2f;
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
}
.hexagon:after {
 content: '';
 position: relative;
 display: block;
 margin-top: 10px;
 width: 50%;
 height: 3px;
 background: #b82222;
}

<ul id="hexGrid">
  <li>
    <div class="hexagon">
    </div>
  </li>
</ul>

Answer 1

SVG 将是这个问题的最佳解决方案。但是如果你想要它与 CSS，你可以创建 3 个六边形并以 10px 的间隙重叠它。

下面的片段：

#hexGrid {
    width: 60%;
 position: absolute;
 margin: 0 auto;
    padding: 0;
    right:5%;
 top: 35%;
}
#hexGrid li {
    list-style-type: none;
    position: absolute;
    width: 27.85714285714286%;
    padding: 0 0 32.16760145166612% 0;
    -o-transform: rotate(-60deg) skewY(30deg);
    -moz-transform: rotate(-60deg) skewY(30deg);
    -webkit-transform: rotate(-60deg) skewY(30deg);
    -ms-transform: rotate(-60deg) skewY(30deg);
    transform: rotate(-60deg) skewY(30deg);
    overflow: hidden;
    visibility: hidden;
}
#hexGrid li:nth-child(2){
  top:-10px;
}
#hexGrid li:nth-child(2) .hexagon{
    background: #fff;
}
#hexGrid li:nth-child(3){
  top:-20px;
}
#hexGrid li * {
    visibility: visible;
}
#hexGrid li .hexagon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2f2f2f;
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
    overflow: hidden;
}

<ul id="hexGrid">
  <li>
    <div class="hexagon">
    </div>
  </li>
  <li>
    <div class="hexagon white">
    </div>
  </li>
  <li>
    <div class="hexagon arrow">
    </div>
  </li>
</ul>

同样，我更喜欢 SVG 而不是这个解决方案。

Answer 2

这是另一种方法

#chevron {
   margin-top: 25px;
      position: relative;
      text-align: center;
      padding: 0; /* try to add more padding and see the difference*/
      margin-bottom: 6px;
      height: 5px; /* change this to make it bigger */
      width: 100px;
    }
    #chevron:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 50%;
      background: red;
      transform: skew(0deg, 28deg);
    }
    #chevron:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 50%;
      background: red;
      transform: skew(0deg, -28deg);
    }
  

    #hexagon {
      width: 100px;
      height: 55px;
      background: #616161;
      position: relative;
   margin-top: 50px;
    }
    #hexagon:before {
      content: "";
      position: absolute;
      top: -25px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 25px solid #616161;
    }
    #hexagon:after {
      content: "";
      position: absolute;
      bottom: -25px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 25px solid #616161;
    }

<div id="hexagon"></div>
<div id="chevron"></div>

Answer 3

以下是更改六边形大小的方法：

#container {
  margin: 50% auto 0;
  width: 300px;
  height: 300px;
  padding: 2px;
  border: 1px solid;
  transform: translate( 0, -50%)
}

#container>div {
  transform: scale(2) translate(50%, 50%); 
}

#chevron {
  margin-top: 40%;
  position: relative;
  text-align: center;
  padding: 0;
  /* try to add more padding and see the difference*/
  margin-bottom: 6px;
  height: 5px;
  width: 100px;
}

#chevron:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  background: red;
  transform: skew(0deg, 28deg);
}

#chevron:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: red;
  transform: skew(0deg, -28deg);
}

#hexagon {
  width: 100px;
  height: 55px;
  background: #616161;
  position: relative;
  margin-top: 50px;
}

#hexagon:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid #616161;
}

#hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid #616161;
}

<div id="container">
  <div id="hexagon"></div>
  <div id="chevron"></div>
</div>

如何使用 :after 在元素后创建箭头形状

How to create an arrow shape after an element with :after

html

css

pseudo-element