Lego Man

by amindunited

HTML

<main>
  <div class="lego-man container">
    <ap-head>

    </ap-head>
    <ap-neck>

    </ap-neck>
    <ap-body>
      
    </ap-body>
  </div>
</main>

CSS

*{
  --shadow-rgba: rgba(0, 0, 0, 0.5);
}

main {
  display: flex;
  justify-content: center;
  margin: 50px;
}

.lego-man.container {
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  position: relative;
}

ap-head:before {
  border-top-left-radius: 25%;
  border-top-right-radius: 25%;
  border-bottom-left-radius: 25%;
  border-bottom-right-radius: 25%;
  background-color: yellow;
  border: solid 1px black;
  border-bottom: none;
  display: block;
  width: 33px;
  height: 20px;
  position: absolute;
  left: 33px;
  top: -10px;
  z-index: 1;
  content: ' ';
}

ap-head {
  border-top-left-radius: 25%;
  border-top-right-radius: 25%;
  border-bottom-left-radius: 35%;
  border-bottom-right-radius: 35%;
  background-color: yellow;
  border: solid 1px black;
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0px;
  z-index: 2;
  filter: drop-shadow(1px 1px 1px var(--shadow-rgba));
}

ap-head:after {
  content: ' ';
  display: block;
  width: 2px;
  height: 2px;
  margin: 43px 29px 75px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 1);
  filter: drop-shadow(0px 1px .2px black)
    drop-shadow(40px 1px .2px black);
}



ap-neck {  
  border-top-left-radius: 25%;
  border-top-right-radius: 25%;
  border-bottom-left-radius: 35%;
  border-bottom-right-radius: 35%;

  background-color: yellow;
  border: solid 1px black;
  display: block;
  width: 50px;
  height: 30px;
  position: absolute;
  top: 90px;
  left: 25px;
  z-index: 1;
}

ap-body {

  border-top-left-radius: 25% 50%;
  border-top-right-radius: 25% 50%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

  position: absolute;
  top: 110px;
  left: -50px;
  width: 200px;
  height: 200px;
  background-color: green;
  perspective-origin: 0% 0%;
  transform-style: preserve-3d;
  perspective: 800px;
}