JSFiddle - React, Tailwind, and code Playground

by Dan Wright

HTML

<div class="kviFlag">
	<div class='triangle'>
		<span style="position:absolute;font-size:200px;transform:rotate(45deg);top:-25px;z-index:50;margin-left:36px;font-weight:900;">!</span>
	</div>
	<span style="position:absolute;margin-left:280px;font-size:150px;top:2px">KVI<span>
</div>

CSS

.triangle {
	position: relative;
	background-color: #FFFF00;
	margin-left:60px;
}
.triangle:before,
.triangle:after {
	content: '';
	position: absolute;
	background-color: inherit;}
.triangle,
.triangle:before,
.triangle:after {
	width:  10em;
	height: 10em;
	border-top-right-radius: 30%;
}

.triangle {
	transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
.triangle:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}


/* kvi_flag */
.kviFlag{
position:relative;
height:175px;
width:600px;
background-color:#006600;
border-radius:25px;}

/* styles below for demonstration purposes only */
body { padding: 30%; }