css CSS Only Shapes

Posted 2021-05-13

#triangle-up { 
	width: 0; 
	height: 0; 
	border-left: 50px solid transparent; 
	border-right: 50px solid transparent; 
	border-bottom: 100px solid red; 
}

#triangle-down { 
	width: 0; 
	height: 0; 
	border-left: 50px solid transparent; 
	border-right: 50px solid transparent; 
	border-top: 100px solid red; 
} 

#triangle-left { 
	width: 0; 
	height: 0; 
	border-top: 50px solid transparent; 
	border-right: 100px solid red; 
	border-bottom: 50px solid transparent; 
}

#triangle-right { 
	width: 0; 
	height: 0; 
	border-top: 50px solid transparent; 
	border-left: 100px solid red; 
	border-bottom: 50px solid transparent; 
} 

.arrow-up {
	display: inline-block;
	width: 24px;
	height: 24px;
	border-top: 2px solid #000;
	border-left: 2px solid #000;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg)
}

.arrow-down {
	display: inline-block;
	width: 24px;
	height: 24px;
	border-top: 2px solid #000;
	border-left: 2px solid #000;
	-webkit-transform: rotate(225deg);
	transform: rotate(225deg)
}

.arrow-left {
	display: inline-block;
	width: 24px;
	height: 24px;
	border-top: 2px solid #000;
	border-left: 2px solid #000;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg)
}

.arrow-right {
	display: inline-block;
	width: 24px;
	height: 24px;
	border-top: 2px solid #000;
	border-left: 2px solid #000;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg)
}