JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<div class="middle"></div>
<div class="extender"></div>

CSS

.middle{
	width: 200px;
	height: 200px;
	background: #444;
	position: absolute;
	left: 100px;
	top: 100px;
	
	border-bottom-left-radius: 100px;
	border-top-right-radius: 100px;
}

.extender{
	width: 500px;
	background: #444;
	height: 200px;
	transform-origin: 100px 100px;
	position: absolute;
	left: 100px;
	top: 100px;
	transition: transform 0.2s ease-in-out, border-radius 0.2s ease-in-out;
	border-top-left-radius: 100px;
	border-bottom-left-radius: 100px;
	
	border-top-right-radius: 100px;
}

.extender:hover{
	transform: rotate(90deg);
	border-top-right-radius: 0px;
	border-bottom-right-radius: 100px;
}