JSFiddle - React, Tailwind, and code Playground

by Long Nguyễn Hoàng

HTML

<ul>
	<li id="c1"><a href="#1"></a></li>
	<li id="c2"><a href="#2"></a></li>
	<li id="c3"><a href="#3"></a></li>
	<li id="c4"><a href="#4"></a></li>
	<li id="c5"><a href="#5"></a></li>
</ul>

CSS

li{list-style:none;float:left;width:10%;}

li a{position:relative;width:100px;height:100px;float:left}
li a:hover{opacity: 0.7}
#c1 a,
#c3 a{width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px 0 100px;
border-color: #007bff transparent transparent transparent;}

#c4 a,
#c2 a{width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 100px 100px;
border-color: transparent transparent #ea433c transparent;}

#c2:target {background:#007bff}