<div class="logo">
<div class="shadow"></div>
<div class="r2">
<div class="ribb1b ribbon"></div>
</div>
<div class="sh21">
<div class="sh2a"></div>
</div>
<div class="sh1 sh1b"></div>
<div class="r1">
<div class="ribb2a ribbon"></div>
</div>
<div class="sh22">
<div class="sh2b"></div>
</div>
<div class="r2">
<div class="ribb2b ribbon"></div>
</div>
<div class="sh1 sh1a"></div>
<div class="r1">
<div class="ribb1a ribbon"></div>
</div>
</div>
.logo, .logo *{
position: absolute;
left: 30%;
}
.ribbon{
width: 75px;
height: 220px;
}
.r1{
-webkit-transform: rotate(62deg);
-moz-transform: rotate(62deg);
-o-transform: rotate(62deg);
-ms-transform: rotate(62deg);
transform: rotate(62deg);
}
.r2{
-webkit-transform: rotate(-62deg);
-moz-transform: rotate(-62deg);
-o-transform: rotate(-62deg);
-ms-transform: rotate(-62deg);
transform: rotate(-62deg);
}
.ribb1a{
background: #E4641F;
top: -158px;
left: 135px;
border-radius: 0px 12px;
-webkit-transform: skewy(28deg);
-moz-transform: skewy(28deg);
-o-transform: skewy(28deg);
-ms-transform: skewy(28deg);
transform: skewy(28deg);
}
.ribb1b{
background: -webkit-gradient(radial,0% 10%,60, -70% 10%,200,from(rgba(169,68,59,1)),to(rgba(190,120,51,1)));
background: -moz-radial-gradient(0% 10%,circle,rgba(169,68,59,1),rgba(190,120,51,1));
background-image: -o-linear-gradient(top,rgba(169,68,59,1),rgba(190,120,51,1));
background: gradient(radial,0% 10%,60, -70% 10%,200,from(rgba(169,68,59,1)),to(rgba(190,120,51,1)));
top: 115px;
left: -198px;
border-radius: 18px 0px;
-webkit-transform: skewy(-28deg);
-moz-transform: skewy(-28deg);
-o-transform: skewy(-28deg);
-ms-transform: skewy(-28deg);
transform: skewy(-28deg);
}
.ribb2a{
background-color: rgba(75,111,107,1);
background: -webkit-gradient(radial,0% 10%,60, -70% 10%,250,from(rgba(75,111,107,1)),to(rgba(99,148,123,1)));
background: -moz-radial-gradient(0% 10%,circle,rgba(75,111,107,1),rgba(99,148,123,1));
background-image: -o-linear-gradient(bottom,rgba(99,148,123,1),rgba(0,0,0,0));
background: gradient(radial,0% 10%,60, -70% 10%,250,from(rgba(75,111,107,1)),to(rgba(99,148,123,1)));
border-radius: 0px 12px;
-webkit-transform: skewy(28deg);
-moz-transform: skewy(28deg);
-o-transform: skewy(28deg);
-ms-transform: skewy(28deg);
transform: skewy(28deg);
top: -158px;
left: 268px;
}
.ribb2b{
background-color: rgba(75,111,107,1);
background: -webkit-gradient(radial,10% 30%,10,10% 25%,150,from(rgba(99,148,123,1)),to(rgba(75,111,107,1)));
background: -moz-radial-gradient(10% 30%,circle,rgba(99,148,123,1),rgba(75,111,107,1));
background-image: -o-linear-gradient(top,rgba(99,148,123,1),rgba(0,0,0,0));
background: gradient(radial,10% 30%,10,10% 25%,150,from(rgba(99,148,123,1)),to(rgba(75,111,107,1)));
top: 116px;
left: -67px;
border-radius: 12px 0px;
-webkit-transform: skewy(-28deg);
-moz-transform: skewy(-28deg);
-o-transform: skewy(-28deg);
-ms-transform: skewy(-28deg);
transform: skewy(-28deg);
}
.sh1{
background: #000;
width: 60px;
height: 100px;
border-radius: 45px;
box-shadow: 0 0 30px rgba(0,0,0,.6);
clip: rect(30px 55px 200px -100px);
}
.sh1a{
-webkit-transform: rotate(-32deg) skewx(30deg);
-moz-transform: rotate(-32deg) skewx(30deg);
-o-transform: rotate(-32deg) skewx(30deg);
-ms-transform: rotate(-32deg) skewx(30deg);
transform: rotate(-32deg) skewx(30deg);
left: 128px;
top: 49px;
}
.sh1b{
-webkit-transform: rotate(148deg) skewx(30deg);
-moz-transform: rotate(148deg) skewx(30deg);
-o-transform: rotate(148deg) skewx(30deg);
-ms-transform: rotate(148deg) skewx(30deg);
transform: rotate(148deg) skewx(30deg);
left: 121px;
top: 230px;
}
.sh22{
top: 140px;
left: 232px;
clip: rect(0px 40px 100px -100px);
}
.sh2b{
opacity: .4;
background-image: -webkit-linear-gradient(top,rgba(0,0,0,.7) 40%,rgba(0,0,0,0) 97%), -webkit-linear-gradient(263deg,rgba(0,0,0,1)60%,rgba(0,0,0,0) 88%);
background-image: -moz-linear-gradient(top,rgba(0,0,0,.7) 40%,rgba(0,0,0,0) 97%), -moz-linear-gradient(263deg,rgba(0,0,0,1)60%,rgba(0,0,0,0) 88%);
background-image: -o-linear-gradient(top,rgba(0,0,0,.7) 40%,rgba(0,0,0,0) 97%), -o-linear-gradient(263deg,rgba(0,0,0,1)60%,rgba(0,0,0,0) 88%);
background-image: linear-gradient(top,rgba(0,0,0,.7) 40%,rgba(0,0,0,0) 97%), linear-gradient(263deg,rgba(0,0,0,1)60%,rgba(0,0,0,0) 88%);
width: 150px;
height: 80px;
-webkit-transform: skewx(-62deg);
-moz-transform: skewx(-62deg);
-o-transform: skewx(-62deg);
-ms-transform: skewx(-62deg);
transform: skewx(-62deg);
}
.sh21{
top: 140px;
left: 77px;
-webkit-transform: scalex(-1);
-moz-transform: scalex(-1);
-o-transform: scalex(-1);
-ms-transform: scalex(-1);
transform: scalex(-1);
clip: rect(0px 40px 100px -100px);
}
.sh2a{
z-index: 50;
opacity: .4;
background-image: -webkit-linear-gradient(top,rgba(0,0,0,.7) 40%,rgba(0,0,0,0) 97%), -webkit-linear-gradient(263deg,rgba(0,0,0,1)60%,rgba(0,0,0,0) 88%);
background-image: -moz-linear-gradient(top,rgba(0,0,0,.7) 40%,rgba(0,0,0,0) 97%), -moz-linear-gradient(263deg,rgba(0,0,0,1)60%,rgba(0,0,0,0) 88%);
background-image: -o-linear-gradient(top,rgba(0,0,0,.7) 40%,rgba(0,0,0,0) 97%), -o-linear-gradient(263deg,rgba(0,0,0,1)60%,rgba(0,0,0,0) 88%);
background-image: linear-gradient(top,rgba(0,0,0,.7) 40%,rgba(0,0,0,0) 97%), linear-gradient(263deg,rgba(0,0,0,1)60%,rgba(0,0,0,0) 88%);
width: 150px;
height: 80px;
-webkit-transform: skewx(-62deg);
-moz-transform: skewx(-62deg);
-o-transform: skewx(-62deg);
-ms-transform: skewx(-62deg);
transform: skewx(-62deg);
}
.shadow,
.shadow:before{
width: 70px;
height: 55px;
border-radius: 70px;
box-shadow: 0 70px 70px rgba(0,0,0,.4);
top: 290px;
left: 60px;
-webkit-transform: rotateX(70deg);
-moz-transform: rotateX(70deg);
-o-transform: rotateX(70deg);
-ms-transform: rotateX(70deg);
transform: rotateX(70deg);
}
.shadow:before{
left: 181px
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.