<div id="batman-logo">
<div id="left-white"></div>
<div id="right-white"></div>
<div id="top-white"></div>
<div id="lighting"></div>
</div>
#batman-logo {
height:136px;
margin:0 auto;
overflow:hidden;
position:relative;
width:500px;
background:#000;
margin-top:50px;
background-image: gradient(
linear,
left bottom,
right top,
color-stop(0, rgb(72,84,92)),
color-stop(0.63, rgb(25,26,26)),
color-stop(0.86, rgb(26,26,26)));
background-image: linear-gradient( /* Remember Browser specific prefixes! */
left bottom, /* Gradient start point (the angle) */
rgb(72,84,92) 0%, /* First colour and start point */
rgb(25,26,26) 63%, /* Second colour and start point */
rgb(26,26,26) 86%); /*Third colour and start point */
background-image: linear-gradient(
left bottom,
rgb(72,84,92) 0%,
rgb(25,26,26) 63%,
rgb(26,26,26) 86%);
}
#batman-logo div {
position:absolute;
}
#left-white {
background:#fff;
border-radius:100px 160px 30px 50px / 80px 100px 50px 50px;
width:230px;
height:80px;
top:-1px;
left:-158px;
}
#left-white:after {
content:"";
position:absolute;
background:#fff;
width:333px;
height:220px;
border-radius:0px 400px 400px 400px / 0px 300px 300px 300px;
top:73px;
left:88px;
}
#right-white {
background:#fff;
border-radius:160px 100px 50px 30px / 100px 80px 50px 50px;
width:230px;
height:80px;
top:-1px;
right:-158px;
}
#right-white:after {
content:"";
position:absolute;
background:#fff;
width:383px;
height:220px;
border-radius:400px 0px 400px 400px / 300px 0px 300px 300px;
top:73px;
right:38px;
}
#top-white {
width:12px;
top:0px;
left:228px;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-top:20px solid #fff;
}
#top-white:before {
content:"";
position:absolute;
width:65px;
height:77px;
background:#fff;
border-radius:30px 10px 10px 30px / 80px 50px 50px 50px;
top:-65px;
right:18px;
transform:rotate(5deg);
transform:rotate(5deg);
transform:rotate(5deg);
}
#top-white:after {
content:"";
position:absolute;
width:65px;
height:77px;
background:#fff;
border-radius:10px 30px 30px 10px / 50px 80px 50px 50px;
top:-65px;
left:18px;
transform:rotate(-5deg);
transform:rotate(-5deg);
transform:rotate(-5deg);
}
#lighting {
width:150px;
height:150px;
background:#fff;
border-radius:75px;
left:100px;
top:-10px;
opacity:0.02;
box-shadow: #fff 0 0 70px;
box-shadow: #fff 0 0 70px;
box-shadow: #fff 0 0 70px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.