Easy trapezoids with 3D transforms

dabblet.css

/**
 * Easy trapezoids with 3D transforms
 */

p {
	position: relative;
	display: inline-block;
	padding: 1em;
	margin: 2em;
}


p.tab::before {
	/* Tip by @krofdrakula */
	border-radius: 10px 10px 0 0;
}

p.tab:hover::before {
	background: #5193AE;
}p::before {	content: ''; /* To generate the box */
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: -1;
	background: skyblue;
	transform: perspective(4px) rotateX(1deg);
	cursor: pointer;
}

dabblet.html

<p>Trapezoid</p>

<p class="tab">Trapezoid tab</p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}