JSFiddle - React, Tailwind, and code Playground

by Aqdas Iftekhar

HTML

<div class="kite">
</div>

CSS

.kite {
	width: 280px;
	height: 280px;
	background: #1e90ff;
  border: 4px solid #222;
	-webkit-clip-path: polygon(0 0, 52% 0, 100% 100%, 0 52%);
clip-path: polygon(0 0, 52% 0, 100% 100%, 0 52%);
}
.kite:hover{
   opacity: 0.6;
}

/* Center the demo */
html, body { height: 100%; }
body {
	display: flex;
	justify-content: center;
	align-items: center;
}