<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;
	}
}