<h3>Border-top/right/bottom/left</h3>
<div class="wrapper">
  <div class="width100"></div>
  <br>
  <div class="width50"></div>
  <br>
  <div class="width15"></div>
  <br>
  <div class="width0"></div>
  <br>
</div>


<h3>Arrow with empty space</h3>
<p>*Hover on the arrows below, you will see empty space</p>
<div class="wrapper empty-space">
  <div class="arrow-down"></div>
  <br>
  <div class="arrow-left"></div>
  <br>
  <div class="arrow-up"></div>
  <br>
  <div class="arrow-right"></div>
  <br>
</div>

<h3>Arrow without empty space</h3>
<p>*Hover on the arrows below, you will see empty space</p>
<div class="wrapper hover">
  <div class="arrow-down2"></div>
  <br>
  <div class="arrow-left2"></div>
  <br>
  <div class="arrow-up2"></div>
  <br>
  <div class="arrow-right2"></div>
  <br>
</div>

<h3>An equilateral triangle</h3>
<div class="wrapper last">
  <div class="equilateralTriangle"></div>
</div>

* {
  font-family: roboto;
  color: #666;
  text-align: center;
}

h3 {
  margin-top: 150px;
  
  &:first-child {
    margin-top: 50px;
  }
}

.last {
  margin-bottom: 50px;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  
  div {
    margin: 10px;
  }
}


// Border-top/right/bottom/left

.width100 {
  width: 100px;
  height: 100px;
  background-color: peachpuff;
  
  border-top: 50px solid lightsalmon;
  border-right: 50px solid salmon ;
  border-bottom: 50px solid indianred;
  border-left: 50px solid  salmon;

}

.width50 {
  width: 50px;
  height: 50px;
  background-color: peachpuff;
  
  border-top: 50px solid lightsalmon;
  border-right: 50px solid salmon ;
  border-bottom: 50px solid indianred;
  border-left: 50px solid  salmon;

}

.width15 {
  width: 15px;
  height: 15px;
  background-color: peachpuff;
  
  border-top: 50px solid lightsalmon;
  border-right: 50px solid salmon ;
  border-bottom: 50px solid indianred;
  border-left: 50px solid  salmon;

}

.width0 {
  width: 0;
  height: 0;
  background-color: peachpuff;
  
  border-top: 50px solid lightsalmon;
  border-right: 50px solid salmon ;
  border-bottom: 50px solid indianred;
  border-left: 50px solid  salmon;
}

// Arrow with empty space
.arrow-down {
  width: 0;
  height: 0;
  
  border-top: 50px solid lightsalmon;  //Coloured border
  
  border-right: 50px solid transparent ; 
  border-bottom: 50px solid transparent;
  border-left: 50px solid  transparent;
}

.arrow-left {
  width: 0;
  height: 0;
  
  border-right: 50px solid salmon;  //Coloured border

  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid  transparent;
}

.arrow-up {
  width: 0;
  height: 0;
  
  border-bottom: 50px solid indianred;  //Coloured border

  border-top: 50px solid transparent;
  border-right: 50px solid transparent ; 
  border-left: 50px solid  transparent;
}

.arrow-right {
  width: 0;
  height: 0;
  
  border-left: 50px solid salmon;  //Coloured border

  border-top: 50px solid transparent;
  border-right: 50px solid  transparent; 
  border-bottom: 50px solid transparent;
}


//Arrow without empty space
.arrow-down2 {
  width: 0;
  height: 0;
  
  border-top: 50px solid lightsalmon;  //Coloured border
  border-right: 50px solid transparent ; 
  border-left: 50px solid  transparent;
  // border-bottom none

}

.arrow-left2 {
  width: 0;
  height: 0;
  
  border-top: 50px solid transparent;
  border-right: 50px solid salmon;  //Coloured border
  border-bottom: 50px solid transparent;
  // border-left none
}

.arrow-up2 {
  width: 0;
  height: 0;
  
  border-right: 50px solid transparent ; 
  border-bottom: 50px solid indianred;  //Coloured border
  border-left: 50px solid  transparent;
  // border-top none

}

.arrow-right2 {
  width: 0;
  height: 0;
  
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid salmon;  //Coloured border
  // border-right none

}

.empty-space {
  div:hover {
    background-color: peachpuff;
  }
}

.hover {
    div:hover {
    background-color: peachpuff;
  }
}


//An EquilateralTriangle
.equilateralTriangle {
  width: 0;
  height: 0;
  
  border-right: 50px solid  transparent; 
  border-left: 50px solid  transparent; 

  border-bottom: 86.60254px solid salmon;  // (border-left-width 50px + border-right-width 50px) * 0.8660254 = 86.60254px  border-bottom-width = EquilateralTriangle height
  
  &:hover {
    background-color: peachpuff;
  }
}