Как сделать такую фигуру?

* { 
  padding: 0; 
  margin: 0; 
} 
#hexagon { 
  top: 50px; 
  left: 150px; 
  width: 100px; 
  height: 55px; 
  background: red; 
  position: relative; 
} 
#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 red; 
} 
#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 red; 
} 
#inner { 
  top: 3px; 
  left: 159px; 
  width: 83px; 
  height: 39px; 
  background: green; 
  position: relative; 
} 
#inner:before { 
  content: ""; 
  position: absolute; 
  top: -25px; 
  left: 0; 
  width: 0; 
  height: 0; 
  border-left: 40px solid transparent; 
  border-right: 40px solid transparent; 
  border-bottom: 25px solid green; 
} 
#inner:after { 
  content: ""; 
  position: absolute; 
  bottom: -25px; 
  left: 0; 
  width: 0; 
  height: 0; 
  border-left: 40px solid transparent; 
  border-right: 40px solid transparent; 
  border-top: 25px solid green; 
} 
#x:hover { 
  opacity: 0.1; 
}

<div id="x"> 
  <div id="hexagon"></div> 
  <div id="inner"></div> 
</div>

.wrap { 
  height: 100vh; 
  background: #fff; 
} 
 
/* Base hex */ 
.hx { 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-align: center; 
  -webkit-align-items: center; 
      -ms-flex-align: center; 
          align-items: center; 
  -webkit-align-content: center; 
      -ms-flex-line-pack: center; 
          align-content: center; 
  -webkit-box-pack: center; 
  -webkit-justify-content: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
   
  width: 120px; 
  height: 120px; 
  margin: 0 auto; 
} 
 
.hexagon { 
	width: 110px; 
	height: 62px; 
	background: #fe635e; 
	position: absolute; 
  z-index: 10; 
  cursor: pointer; 
} 
.hexagon:before, 
.hexagon:after { 
  content: ""; 
	position: absolute; 
  left: 0; 
	width: 0; 
	height: 0; 
} 
 
.hexagon:before {	 
	top: -27px; 	 
	border-left: 55px solid transparent; 
	border-right: 55px solid transparent; 
	border-bottom: 28px solid #fe635e; 
} 
.hexagon:after { 
	bottom: -27px;  
	border-left: 55px solid transparent; 
	border-right: 55px solid transparent; 
	border-top: 28px solid #fe635e; 
} 
 
/* hex Border */ 
.hexagon.border { 
  width: 120px; 
	height: 70px; 
  background: #fc8582; 
  z-index: 2; 
} 
.hexagon.border:before { 
	top: -30px;  
	border-left: 60px solid transparent; 
	border-right: 60px solid transparent; 
	border-bottom: 30px solid #fc8582; 
} 
.hexagon.border:after { 
	bottom: -30px;  
	border-left: 60px solid transparent; 
	border-right: 60px solid transparent; 
	border-top: 30px solid #fc8582; 
} 
 
/* Icon */ 
.base span { 
  display: block; 
  text-align: center; 
  font-weight: bolder; 
  text-transform: uppercase; 
  font-size: 3rem; 
  line-height: 3.5rem; 
  position: relative; 
  color: #fff; 
   
  -webkit-transition: all .2s ease-in-out; 
   
  transition: all .2s ease-in-out; 
} 
 
/* Hover */ 
.active .base span, 
.base:hover span { 
  color: #fa6358; 
} 
 
 
.active .base, 
.base:hover { 
  background: #fff; 
} 
 
.active .base:before, 
.base:hover:before {	 
	top: -27px; 	 
	border-left: 55px solid transparent; 
	border-right: 55px solid transparent; 
	border-bottom: 28px solid #fff; 
} 
.active .base:after, 
.base:hover:after { 
	bottom: -27px;  
	border-left: 55px solid transparent; 
	border-right: 55px solid transparent; 
	border-top: 28px solid #fff; 
} 
 
.active .hexagon.border, 
.base:hover~.hexagon.border { 
  background: #ff625d; 
} 
.active .hexagon.border:before, 
.base:hover~.hexagon.border:before { 
	top: -30px;  
	border-left: 60px solid transparent; 
	border-right: 60px solid transparent; 
	border-bottom: 30px solid #ff625d; 
} 
.active .hexagon.border:after, 
.base:hover~.hexagon.border:after { 
	bottom: -30px;  
	border-left: 60px solid transparent; 
	border-right: 60px solid transparent; 
	border-top: 30px solid #ff625d; 
} 
 
 
 
/* Add other style */ 
ul { 
  padding: 0; 
  margin: 0; 
  list-style-type: none; 
} 
.hx-list { 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-flex-flow: column nowrap; 
      -ms-flex-flow: column nowrap; 
          flex-flow: column nowrap; 
  -webkit-box-align: center; 
  -webkit-align-items: center; 
      -ms-flex-align: center; 
          align-items: center; 
  -webkit-align-content: center; 
      -ms-flex-line-pack: center; 
          align-content: center; 
  -webkit-box-pack: center; 
  -webkit-justify-content: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  margin: 5rem auto; 
  width: 100%; 
} 
.hx-item { 
  text-align: center; 
  width: 25%; 
} 
.hx-title { 
  color: #888; 
  text-transform: uppercase; 
  font-weight: normal; 
} 
 
@media screen and (min-width: 500px){ 
  .hx-list { 
    -webkit-flex-flow: row nowrap; 
        -ms-flex-flow: row nowrap; 
            flex-flow: row nowrap; 
  } 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 
<div class="wrap"> 
  <ul class="hx-list"> 
    <li class="hx-item"> 
      <div class="hx"> 
        <div class="hexagon base"> 
          <span><i class="fa fa-rocket" aria-hidden="true"></i></span> 
        </div> 
        <!-- <div class="hexagon shadow"></div> --> 
        <div class="hexagon border"></div> 
      </div> 
 
      <h3 class="hx-title"> 
        clients 
      </h3> 
    </li> 
     
    <li class="hx-item active"> 
      <div class="hx"> 
        <div class="hexagon base"> 
          <span><i class="fa fa-rocket" aria-hidden="true"></i></span> 
        </div> 
        <!-- <div class="hexagon shadow"></div> --> 
        <div class="hexagon border"></div> 
      </div> 
 
      <h3 class="hx-title"> 
        clients 
      </h3> 
    </li> 
     
    <li class="hx-item"> 
      <div class="hx"> 
        <div class="hexagon base"> 
          <span><i class="fa fa-rocket" aria-hidden="true"></i></span> 
        </div> 
        <!-- <div class="hexagon shadow"></div> --> 
        <div class="hexagon border"></div> 
      </div> 
 
      <h3 class="hx-title"> 
        clients 
      </h3> 
    </li> 
     
    <li class="hx-item"> 
      <div class="hx"> 
        <div class="hexagon base"> 
          <span><i class="fa fa-rocket" aria-hidden="true"></i></span> 
        </div> 
        <!-- <div class="hexagon shadow"></div> --> 
        <div class="hexagon border"></div> 
      </div> 
 
      <h3 class="hx-title"> 
        clients 
      </h3> 
    </li> 
  </ul> 
</div>