CSS shapes

dabblet.css

/**
 * CSS shapes
 */
 .shape{
 	margin: 20px auto;
 }
.trapezoid{
	position: relative;
	width: 200px;
	height: 200px;
	background-color: red;
}
.trapezoid:after, .trapezoid:before{
	content: '';
	position: absolute;
	left: 100%;
	top: 0;
	border-bottom: 200px solid green;
	border-right: 100px solid transparent;
}
.trapezoid:before{
	left: -50%;
	transform: rotateY(180deg);
	border-bottom: 200px solid green;
}
/** ============================================== **/
.trapezoid1{
	position: relative;
	width: 200px;
	border-bottom: 200px solid red;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
}
/** ============================================== **/
.parallelogram{
	position: relative;
	width: 200px;
	height: 150px;
	background-color: red;
	transform: skew(20deg, 0deg);
}
/** ============================================== **/
.six-point-star{
	position: relative;
	width: 0;
	height: 0;
	border-bottom: 200px solid red;
	border-left: 130px solid transparent;
	border-right: 130px solid transparent;
}
.six-point-star:after{
	content: '';
	position: absolute;	
	left: -130px;
	top: 70px;
	border-bottom: 200px solid green;
	border-left: 130px solid transparent;
	border-right: 130px solid transparent;	
	transform: rotateX(180deg);
}
/** ============================================== **/
.five-point-star{
	position: relative;
	margin-top: 170px;
	width: 0;
	height: 0;
	border-top: 100px solid red;
	border-left: 140px solid transparent;
	border-right: 140px solid transparent;
}
.five-point-star:before,.five-point-star:after{
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	left: -45px;
	top: -175px;
	border-left: 100px solid green;
	border-top: 130px solid transparent;
	border-bottom: 130px solid transparent;
	transform: rotate(20deg);
}
.five-point-star:after{
	border-left: 100px solid blue;
	transform: rotate(-202deg);
}
/** ============================================== **/
.pentagon{
	position: relative;
	margin-top: 170px;
	width: 100px;
	border-top: 100px solid red;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
}
.pentagon:before{
	position: absolute;
	content: '';
	border-bottom: 80px solid green;
	border-left: 90px solid transparent;
	border-right: 90px solid transparent;
	top: -180px;
	left: -40px;
}
/**** ============================================== ****/
.hexagon{
	position: relative;
	margin-top: 80px;
	width: 150px;
	height: 70px;
	background-color: red;
}
.hexagon:before{
	content: '';
	position: absolute;
	height: 0;
	width: 0;
	top: -40px;
	border-bottom: 40px solid green;
	border-left: 75px solid transparent;
	border-right: 75px solid transparent;
}
.hexagon:after{
	content: '';	
	position: absolute;
	height: 0;
	width: 0;
	top: 70px;
	border-top: 40px solid blue;
	border-left: 75px solid transparent;
	border-right: 75px solid transparent;
}

dabblet.html

<div class='shape trapezoid'></div>
<div class='shape trapezoid1'></div>
<div class='shape parallelogram'></div>
<div class='shape six-point-star'></div>
<div class='shape five-point-star'></div>
<div class='shape pentagon'></div>
<div class='shape hexagon'></div>

settings.json

{"view":"separate","fontsize":"60","seethrough":"","prefixfree":"1","page":"all"}