Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

5 Tips on Stick Figure drawing with HTML and CSSIt was a fine winter day. I woke up at noon and suddenly thought of sending a video. I opened the photo album and found all over the screenshots of the dramaTouch the fishThe name of the hook of B station is the same, that’s me! It’s me!)

The basic idea is that nothing else is needed, because the stick figure can be divided, and the most complicated hair can be drawn as long as the radian problem is solved. So RADIUS and transform rotate are selected to achieve this

HTML part of the code is mainly divided structure, the overall difficulty is not big, mainly slowly tune, entertainment.

Attached code, hope to exchange for a three – link ~

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="com">
      <div class="hairCom">
        <div class="hairOne"></div>
        <div class="hairTwo"></div>
        <div class="hairThree"></div>
        <div class="hairFour"></div>
        <div class="hairFive"></div>
        <div class="hairSix"></div>
      </div>
      <div class="eyeCom">
        <div class="nose"></div>
      </div>
      <div class="faceCom">
        <div class="mouse"></div>
      </div>
      <div class="leftEar"></div>
      <div class="rightEar"></div>
      <div class="clothes"></div>
    </div>
  </body>
</html>

Copy the code
* {
  margin: 0;
  padding: 0;
}
html.body {
  background-color: # 000;
  justify-content: center;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  display: -webkit-flex;
  align-items: center;
}
.com{
  width: 300px;
  height: 300px;
  background-color: #fff;
  padding-left: 50px;
}
.hairCom{
  width: 90%;
  margin: 0 auto;
  height: 120px;
  position: relative;
}
.hairCom>div{
  position: absolute;
}
.hairOne{
  width: 20px;
  border-left: 30px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 100px solid #cbcacf;
  margin-top: 60px;
  border-radius: 0% 100% 0% 100%;
}
.hairTwo{
  border-bottom: 100px solid transparent;
  border-left: 40px solid transparent;
  border-right: 10px solid transparent;
  border-radius: 100% 5% 0 0;
  background-color: #cbcacf;
  margin-left: 20px;
  margin-top: 25px;
  transform: rotate(-15deg);
}
.hairThree{
  margin-top: -5px;
  margin-left: 20px;
  border-left: 80px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 130px solid #cbcacf;
  border-radius: 100% 50% 0 50%;
  transform: rotate(10deg);
}
.hairFour{
  margin-top: -20px;
  border-bottom: 170px solid #cbcacf;
  border-left: 80px solid transparent;
  border-right: 70px solid transparent;
  transform: rotate(35deg);
  margin-left: 70px;
}
.hairFive{
  border-bottom: 120px solid transparent;
  border-left: 30px solid transparent;
  border-right: 40px solid transparent;
  border-radius: 0 100% 0 0 ;
  transform:  rotate(60deg);
  background-color: #cbcacf;
  margin-left: 160px;
  margin-top: 40px;
}
.hairSix{
  margin-top: 60px;
  border-bottom: 120px solid #cbcacf;
  border-left: 50px solid transparent;
  border-right: 20px solid transparent;
  transform: rotate(60deg);
  margin-left: 170px;
}
.eyeCom{
  background-color: # 000;
  position: absolute;
  width: 170px;
  height: 80px;
  margin-left: 35px;
  transform: rotate(10deg);
  margin-top: -10px;
  border-radius: 50% 50% 20% 20%;
  z-index: 2;
}
.nose{
  position: absolute;
  border-bottom: 15px solid #ffe4c4;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  margin-left: 60px;
  margin-top: 65px;
}
.faceCom{
  background-color: #ffe4c4;
  width: 160px;
  height: 90px;
  position: absolute;
  margin-top: 40px;
  margin-left: 30px;
  transform: rotate(10deg);
  border-radius: 0 0 50% 50%;
  z-index: 1;
}
.mouse{
  width: 30px;
  height: 35px;
  border: 2px solid # 000;
  border-radius: 0 0 50% 50%;
  margin-top: 40px;
  margin-left: 70px;
  background-color: #eeb4b4;
}
.leftEar{
  width: 30px;
  height: 40px;
  background-color: #ffdab9;
  margin-left: 15px;
  margin-top: 35px;
  z-index: -1;
  transform: rotate(3deg);
  border-radius: 10px 20px;
}
.rightEar{
  width: 30px ;
  height: 38px;
  background-color: #ffdab9;
  margin-left: 180px;
  margin-top: -10px;
  z-index: -1;
  transform: rotate(20deg);
  border-radius: 20px 10px;
}
.clothes{
  width: 90px;
  border-top: 80px solid # 000;
  border-radius: 30% 30% 0 0;
  margin-top: 20px;
  margin-left: 30px;
  transform: rotate(12deg);
  border-left: 20px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  z-index: 3;
}
Copy the code

Like speed up post (crazy hint