trapezoid

dabblet.css

/**
 * trapezoid
 */
	
	span {
		display: block;
		z-index: 1;
		position: relative;
		
		/* set trapezoid size */
		width: 300px;
		height: 70px;
	
		/* edit text styling here */
		margin: 100px auto;
		font: 16px/50px Helvetica, sans-serif;
		text-align: center;
		color: white;
		background-color: cyan;
	}
	
	span:before,
	span:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		bottom: 0;
		z-index: -1;
		
		/* more styling */
		border-radius: 6px;
		background-color: black;
	}
	
	span:before {
		transform: skew(25deg);
		left: 25px;
	}
	
	span:after {
		transform: skew(-25deg);
		right: 25px;
		left: auto;
100

dabblet.html

<span>Trapezium</span>

settings.json

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