Ikurrina

HTML Markup

<div class="ikurrina bg-red">
   <div class="l-green l-up-r-down"></div>
   <div class="l-green r-down-l-up"></div>
   <div class="l-white horiz"></div>
   <div class="l-white vert"></div>
</div> 
				

CSS3 Code

/* ikurriña */
.ikurrina {
	position: relative;
	width: 480px;
	min-width: 480px;
	height: 300px;
	min-height: 300px;
	overflow: hidden;
	margin: 20px auto;
}
.ikurrina.bg-red {
	background-color: #db241e;
}
.l-green {
	position: absolute;
	width: 600px;
	height: 30px;
	background-color: #009543;
}
.l-green.l-up-r-down {
	left: 0px;
	top: 0px;
	-webkit-transform: rotate(32deg) translate(20px, 145px);
	-moz-transform: rotate(32deg) translate(20px, 145px);
	-o-transform: rotate(32deg) translate(20px, 145px);
	-ms-transform: rotate(32deg) translate(20px, 145px);
	transform: rotate(32deg) translate(20px, 145px);
}
.l-green.r-down-l-up {
	left: 0px;
	top: 0px;
	-webkit-transform: rotate(-32deg) translate(-120px, 82px);
	-moz-transform: rotate(-32deg) translate(-120px, 82px);
	-o-transform: rotate(-32deg) translate(-120px, 82px);
	-ms-transform: rotate(-32deg) translate(-120px, 82px);
	transform: rotate(-32deg) translate(-120px, 82px);
}
.l-white {
	position: absolute;
	background-color: #fefefe;
}
.l-white.vert {
	left: 0px;
	top: 0px;
	width: 30px;
	height: 300px;
	-webkit-transform: rotate(0deg) translate(225px, 0px);
	-moz-transform: rotate(0deg) translate(225px, 0px);
	-o-transform: rotate(0deg) translate(225px, 0px);
	-ms-transform: rotate(0deg) translate(225px, 0px);
	transform: rotate(0deg) translate(225px, 0px);
}
.l-white.horiz {
	left: 0px;
	top: 0px;
	width: 480px;
	height: 30px;
	-webkit-transform: rotate(0deg) translate(0px, 135px);
	-moz-transform: rotate(0deg) translate(0px, 135px);
	-o-transform: rotate(0deg) translate(0px, 135px);
	-ms-transform: rotate(0deg) translate(0px, 135px);
	transform: rotate(0deg) translate(0px, 135px);
}
				

Originally published at cssdeck.com, but now turned into a full site.