<div class="banner">
<div class="front">
<div class="top">
<div class="text">
BRYCE SNYDER
</div><!--end text-->
</div><!--end top-->
<div class="bot">
<div class="text">
WEB CHAMPION
</div><!--end text-->
</div><!--end--bot-->
</div><!--end front-->
<div class="back">
<div class="top">
</div><!--end top-->
<div class="mid">
</div><!--end mid-->
<div class="bot">
</div><!--end--bot-->
</div><!--end back-->
</div><!--end banner-->
$front:#19B2C3;
$back:#148F9C;
body {
font-family: helvetica;
}
.banner {
height:200px;
width:350px;
margin:75px auto;
.front {
position:absolute;
z-index:1;
.top {
height:50px;
width:350px;
background:$front;
transform: skewY(10deg);
-ms-transform: skewY(10deg); /* IE 9 */
-webkit-transform: skewY(-10deg); /* Safari and Chrome */
}
.bot {
height:50px;
width:350px;
background:$front;
margin-top:42px;
transform: skewY(10deg);
-ms-transform: skewY(10deg); /* IE 9 */
-webkit-transform: skewY(-10deg); /* Safari and Chrome */
}
.text {
color:white;
text-align:center;
font-size:37px;
margin-top: 7px;
position: absolute;
margin-left:30px;
}
}
.back {
position:absolute;
z-index:0;
.top {
position:absolute;
height:50px;
width:175px;
margin-top:-46px;
margin-left:175px;
background:$back;
transform:skewY(10deg);
-ms-transform:skewY(10deg); /* IE 9 */
-webkit-transform:skewY(10deg); /* Safari and Chrome */
}
.top:before {
content:"";
display:block;
position:absolute;
margin-left:-25px;
width:0;
height:0;
border-bottom:25px solid transparent;
border-right:25px solid $back;
}
.top:after {
content:"";
display:block;
position:absolute;
width:0;
height:0;
margin-top:25px;
margin-left:-25px;
border-top:25px solid transparent;
border-right:25px solid $back;
}
.mid {
height:50px;
margin-top:46px;
width:350px;
background:$back;
transform: skewY(10deg);
-ms-transform: skewY(10deg); /* IE 9 */
-webkit-transform: skewY(5deg); /* Safari and Chrome */
}
.bot {
height:50px;
margin-top:42px;
width:175px;
background:$back;
transform: skewY(10deg);
-ms-transform: skewY(10deg); /* IE 9 */
-webkit-transform: skewY(10deg); /* Safari and Chrome */
}
.bot:before {
position:absolute;
content:"";
display:block;
width:0;
height:0;
margin-left:175px;
border-bottom:25px solid transparent;
border-left:25px solid $back;
}
.bot:after {
position:absolute;
content:"";
display:block;
width:0;
height:0;
margin-top:25px;
margin-left:175px;
border-top:25px solid transparent;
border-left:25px solid $back;
}
}
}
View Compiled
// No js required.
This Pen doesn't use any external CSS resources.