Как создать форму стрелки после элемента с: 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

Вот еще один способ сделать это

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

Вот как бы вы изменили размер шестиугольника:

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

Answer 3

SVG будет лучшим решением для этой проблемы. Но, тем не менее, если вы хотите использовать CSS, вы можете создать 3 шестиугольника и перекрывать их с разрывом в 10 пикселей.

Фрагмент ниже:

#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 этому решению.