<div class="wrapper">
  <div class="hexagono-out">
    <div class="hexagono-out-shadow">
    </div> 
  </div>
  <div class="hexagono-in-shadow">  
      <div class="hexagono-in">
         <div class="item pos2"></div>
        <div class="item pos1"></div>
        <div class="item pos3"></div>
        <div class="item pos4"></div>
         <div class="item pos5"></div>
         <div class="item pos6"></div>
         <div class="item pos7"></div>
         <div class="item pos8"></div>
         <div class="item pos9"></div>
        <div class="item pos10"></div>
         <div class="item pos11"></div>
         <div class="item pos12"></div>
         <div class="item pos13"></div>
         <div class="item pos14"></div>
         <div class="item pos15"></div>
        <span class="fl">FL</span>
       
      </div>
    </div>
    <div class="triangle"></div>
</div>

@import "compass/css3";

$background:#fef9f3;
$backgroundOut: #3a243f; 
$backgroundOutShadow:#7d698b;
$backgroundIn: #bc6697; 
$backgroundShadow:#9a3869;
$white: #ffffff;

html {
  background:$background;
}

.wrapper {
  margin: 20% auto;
  width:400px;
}

@mixin hexagono($hwidth, $hheight, $hborders, $hborderbottom, $background){
  width: $hwidth;
  height: $hheight;
  background: $background;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: -($hborderbottom);
    left: 0;
    width: 0;
    height: 0;
    border-left: $hborders solid transparent;
    border-right: $hborders solid transparent;
    border-bottom: $hborderbottom solid $background;
  }
  &::after {
  content: "";
  position: absolute;
  bottom: -($hborderbottom);
  left: 0;
  width: 0;
  height: 0;
  border-left: $hborders solid transparent;
  border-right: $hborders solid transparent;
  border-top: $hborderbottom solid $background; 
} 
}
@mixin triangulo ($trianguloTop, $trianguloLeft, $trianguloBottom, $color){
  width: 0;
    height: 0;
  border-top: $trianguloTop solid transparent;
  border-left: $trianguloLeft solid $color;
  border-bottom: $trianguloBottom solid transparent;

}

.hexagono-out {
    @include hexagono(300px, 173px, 150px, 87px, $backgroundOut);     
  }
.hexagono-out-shadow {
    @include hexagono(300px, 173px, 150px, 87px, $backgroundOutShadow);
  position:absolute;
  z-index:4;
  clip: rect(-88px, 300px, 260px, 150px);
  }
.hexagono-in-shadow {
   @include hexagono(225px, 130px, 112px, 69px, $backgroundShadow);
  margin:-155px 38px; 
  position:absolute;
  z-index:5;
}
.hexagono-in {
   @include hexagono(221px, 127px, 110px, 67px, $backgroundIn);
  margin:1px 2px; 
  position:absolute;
  z-index:10;
  
}
.fl {
  font-size:10em;
  text-align:center;
  display:block;
  position:relative;
  z-index:10;
  color:$backgroundIn;
  text-shadow: -35px 20px 35px $backgroundShadow;
  font-family:open sans;
  margin-top:-55px;
  margin-left:-10px;
}
.item {
  color:$white;
  font-size:52px;
  position:absolute;
  z-index:1000;
}
.pos1 {
  margin-top:19px;
  margin-left:30px;
   @include triangulo (20px, 38px, 20px, $white); 
   @include rotate(0deg);
}

.pos2 {
  margin-top:-2px;
  margin-left:30px;
  @include triangulo (20px, 38px, 20px, $white); 
  @include rotate(180deg);
  
}
.pos3 {
  margin-top:40px;
  margin-left:30px;
  @include triangulo (20px, 38px, 20px, $white); 
  @include rotate(180deg);
  
}
.pos4 {
  margin-top:61px;
  margin-left:30px;
  @include triangulo (20px, 38px, 20px, $white); 
  @include rotate(0deg);
  
}
.pos5 {
  margin-top:82px;
  margin-left:30px;
  @include triangulo (20px, 38px, 20px, $white); 
  @include rotate(180deg);
  
}
.pos6 {
  margin-top:-21px;
  margin-left:68px;
  @include triangulo (20px, 38px, 20px, $white); 
  @include rotate(180deg);
  
}
.pos7 {
  margin-top:40px;
  margin-left:69px;
  @include triangulo (20px, 38px, 20px, $white); 
  @include rotate(0deg);
  
}
.pos8 {
  margin-top:-21px;
  margin-left:107px;
  @include triangulo (20px, 38px, 20px, $white); 
  @include rotate(0deg);
  
}
.pos9 {
  margin-top:21px;
  margin-left:108px;
  @include triangulo (20px, 38px, 20px, $white); 
  @include rotate(0deg);
  
}
.pos10 {
  margin-top:42px;
  margin-left:108px;
  @include triangulo (20px, 38px, 20px, $white); 
  @include rotate(180deg);
  
}
.pos11 {
  margin-top:63px;
  margin-left:108px;
  @include triangulo (20px, 38px, 20px, $white); 
  @include rotate(0deg);
  
}
.pos12 {
  margin-top:84px;
  margin-left:108px;
  @include triangulo (20px, 38px, 20px, $white); 
  @include rotate(180deg);
  
}
.pos13 {
  margin-top:105px;
  margin-left:108px;
  @include triangulo (20px, 38px, 20px, $white); 
  @include rotate(0deg);
  
}
.pos14 {
  margin-top:84px;
  margin-left:147px;
  @include triangulo (20px, 38px, 20px, $white); 
  @include rotate(0deg);
  
}
.pos15 {
  margin-top:63px;
  margin-left:147px;
  @include triangulo (20px, 38px, 20px, $white); 
  @include rotate(180deg);
  
}
.triangle {
    margin-top:44px;
    margin-left:71px;
   @include triangulo (40px, 80px, 40px, $backgroundOut); 
   @include rotate(3deg);
}