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

Question

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

这将导致我转到展示位置之外的下一个问题。如何使用: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;
}

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>