html - 如何在 :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

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

#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>