<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);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.