JSFiddle - React, Tailwind, and code Playground

HTML

<div class='triangle'></div>
<div class='triangle reverse'></div>
<div class='triangle'></div>
<div class='triangle reverse'></div>
<div class='triangle'></div>

CSS

html {
	background: #CCCCCC;
}
/**
 * How to make 3-corner-rounded triangle in CSS (SO)
 * http://stackoverflow.com/q/14446677/1397351
 */
.triangle, .triangle:before, .triangle:after { 
	width: 250px; 
	height: 250px; 
	display: inline-block;
	float: left;
	transition: 300ms;
}

.reverse { 
    transform: translateY(50%) rotate(90deg) skewY(30deg) scaleX(.866) !important;
	margin-left: -155px;
	margin-right: -35px;
	margin-top: -90px;
}

.triangle {
	overflow: hidden;
	position: relative;
	border-radius: 20%;
	transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
	cursor: pointer;
	pointer-events: none;
}
.triangle:before, .triangle:after {
	position: absolute;
	pointer-events: auto;
	content: '';
	background: gray;
}
.triangle:before {
	border-radius: 20% 20% 20% 53%;
	transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%)
	skewX(30deg) scaleY(.866) translateX(-24%);
}
.triangle:after {
	border-radius: 20% 20% 53% 20%;
	transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%)
	skewX(-30deg) scaleY(.866) translateX(24%);
}

.triangle:hover:before, .triangle:hover:after { 
	background: orange;
}