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

Question

I created a hexagon with css which is working well. Now, I am attempting to create somewhat of an arrow to set under the hexagon. In my attempt, I used the pseudo element, :after to try to position the line after the hexagon. For some reason the line is appearing at the top of the hexagon.
This leads me to the next issue, outside of the placement. How would I create an arrow type line (see illustration below) with :after. Is it even possible?
Is there a better way to do this?
#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

Here is how you would change the size of hexagon:
#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 2

SVG will be the best solution for this problem.. But still if you want it with CSS, you can create 3 Hexagons and overlap it at 10px gap.
Snippet below:
#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>
Again, I would prefer SVG over this solution.

Answer 3

Here's another way of doing that
#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>