Parallelogram in CSS

by spikey

HTML

<div id="question">
    <div class="wrapper">
        <p>Who's awesome?</p>
    </div>
</div>

<div id="answer">
    <div class="wrapper">
        <p>Spike's awesome!</p>
    </div>
</div>

CSS

#question {
    margin-top: 150px;
	padding: 1% 20px;
	transform: skewY(-3deg);
	-moz-transform: skewY(-3deg);
	-webkit-transform: skewY(-3deg);
	-ms-transform: skewY(-3deg);
	-o-transform: skewY(-3deg);
	background-color: #0066cc;
	height: 80px;
	overflow-y: hidden;
}

	#question > .wrapper {
		transform: skewY(3deg);
		-moz-transform: skewY(3deg);
		-webkit-transform: skewY(3deg);
		-ms-transform: skewY(3deg);
		-o-transform: skewY(3deg);
		width: 80%;
		height: 100%;
		margin: 0 auto;
		overflow: initial;
		text-wrap: normal;
	}

/* Answer stuff */
#answer {
    margin-top: 0px;
	padding: 1% 20px;
	transform: skewY(-3deg);
	-moz-transform: skewY(-3deg);
	-webkit-transform: skewY(-3deg);
	-ms-transform: skewY(-3deg);
	-o-transform: skewY(-3deg);
	background-color: #edc44e;
	height: 80px;
	overflow-y: hidden;
}

	#answer > .wrapper {
		transform: skewY(3deg);
		-moz-transform: skewY(3deg);
		-webkit-transform: skewY(3deg);
		-ms-transform: skewY(3deg);
		-o-transform: skewY(3deg);
		width: 80%;
		height: 100%;
		margin: 0 auto;
		overflow: initial;
		text-wrap: normal;
	}