<div class="container">
<div class="main">
</div>
<div class="headlight"></div>
<div class="taillight"></div>
<div class="wheel-front"></div>
<div class="wheel-rear"></div>
<div class="glass"></div>
</div>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
background: #495f5e;
}
.container {
position: relative;
left: 25%;
}
.container .main {
position: relative;
width: 100vw;
height: 100vh;
}
.container .main::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 500px;
background: #acb1b1;
clip-path: polygon(6% 51%, 44% 33%, 99% 43%, 97% 58%, 90% 59%, 86% 51%, 75% 51%, 69% 62%, 30% 63%, 26% 52%, 14% 52%, 10% 62%, 6% 61%);
}
.container .wheel-front::before {
content: '';
position: absolute;
top: -12px;
left: -12px;
width: 600px;
height: 500px;
background: #031817;
clip-path: circle(8.2% at 22% 64%);
}
.container .wheel-rear::before {
content: '';
position: absolute;
top: -15px;
left: 350px;
width: 600px;
height: 500px;
background: #031817;
clip-path: circle(8.2% at 22% 64%);
}
.container .glass::before {
content: '';
position: absolute;
top: -1px;
left: 12px;
width: 600px;
height: 500px;
background: #000;
clip-path: polygon(43% 35%, 63% 39%, 64% 42%, 25% 44%);
}
.container .headlight::before {
content: '';
position: absolute;
top: 259px;
left: 36px;
width: 25px;
height: 7px;
background: #eefffe;
box-shadow: -10px 1px 12px 3px rgba(238,255,254, 0.9);
}
.container .taillight::before {
content: '';
position: absolute;
top: 215px;
left: 586px;
width: 7px;
height: 8px;
background: #ff0000;
transform: rotate(11deg);
box-shadow: 7px 1px 9px 2px rgba(244,4,4, 0.7);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.