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

About the second issue of the Book series! The first issue of stick figure five Wu 5T5 directions: juejin.cn/post/702080…

This is a warm and sunny morning, I am feeling the drowsy class, suddenly refreshed, It’s Friday, the video hasn’t started yet, so I have a flash of inspiration and decide to draw a small TV with CSS (so if see the same content on the B station video with the name of the hook also has the hook, that’s me! It’s me!)

In general, this is easier than the first one, because it’s symmetric

The main thing is that the mouth and the antenna need to be adjusted. The mouth mainly relies on the border-radius and border-bottom antenna with transform: rotate

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="overHead">
      <span class="hair1"></span>
      <span class="hair2"></span>
    </div>
    <div class="head">
      <div class="face">
        <div class="eye1"></div>
        <div class="eye2"></div>
        <div class="mouseLeft"></div>
        <div class="mouseRight"></div>
      </div>
    </div>
    <div class="clothesHead">
      <div class="left">
        <div class="leftDiv"></div>
      </div>
      <div class="right">
        <div class="rightDiv"></div>
      </div>
    </div>
    <div class="tie1"></div>
    <div class="tie2"></div>
    <div class="tie3"></div>
    <div class="tie4"></div>
    <div class="tie5"></div>
    <div class="clothes"></div>
    <div class="leftHandCom">
      <div class="leftHand"></div>
    </div>
    <div class="rightHandCom">
      <div class="rightHand"></div>
    </div>
  </div>
</body>

</html>
Copy the code
body {
  width: 100%;
  height: 100%;
  background-color: lightblue;
}

.com {
  height: 440px;
  width: 400px;
  background-color: #fff;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

.hair1 {
  position: absolute;
  width: 100px;
  height: 20px;
  border-radius: 50%;
  background-color: # 000;
  transform: rotate(60deg);
  left: 80px;
  top: 60px;
}

.hair2 {
  position: absolute;
  width: 100px;
  height: 20px;
  border-radius: 50%;
  background-color: # 000;
  transform: rotate(-60deg);
  right: 80px;
  top: 60px;
}

.head {
  background-color: #fff;
  width: 240px;
  height: 185px;
  border: 3px solid # 000;
  border-radius: 10px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 20%;
}

.face {
  width: 200px;
  height: 130px;
  border: 5px solid # 000;
  border-radius: 10px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 10%;
  display: flex;
}

.eye1 {
  width: 55px;
  height: 10px;
  background-color: # 000;
  transform: rotate(-40deg);
  margin-top: 40px;
  margin-left: 25px;
}

.eye2 {
  width: 55px;
  height: 10px;
  background-color: # 000;
  transform: rotate(40deg);
  margin-top: 40px;
  margin-left: 40px;
}

.mouseLeft {
  position: absolute;
  width: 30px;
  height: 25px;
  border-radius: 50%;
  border-bottom: 4px solid # 000;
  left: 70px;
  top: 70px;
}

.mouseRight {
  position: absolute;
  width: 30px;
  height: 25px;
  border-radius: 50%;
  border-bottom: 4px solid # 000;
  left: 100px;
  top: 70px;
}

.clothesHead {
  display: flex;
  position: relative;
}

.clothesHead .left {
  width: 0;
  height: 0;
  border: 15px solid;
  border-color: black transparent transparent;
  margin-left: 160px;
}

.clothesHead .left .leftDiv {
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: #fff transparent transparent;
  top: 0px;
  left: 165px;
}

.clothesHead .right {
  width: 0;
  height: 0;
  border: 15px solid;
  border-color: black transparent transparent;
  margin-left: 20px;
}

.clothesHead .right .rightDiv {
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: #fff transparent transparent;
  top: 0px;
  left: 215px;
}

.tie1 {
  width: 10px;
  height: 0;
  border-top: 20px solid blue;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-bottom: 1px solid # 000;
  margin-left: 190px;
  margin-top: -30px;
}

.tie2 {
  width: 10px;
  height: 0;
  border-width: 0 6px 60px 6px;
  border-style: none solid solid;
  border-color: transparent transparent blue;
  margin-left: 190px;
}

.tie3 {
  width: 0;
  height: 0;
  border: 11px solid;
  border-color: blue transparent transparent;
  margin-left: 190px;
}

.tie4 {
  position: absolute;
  top: 301px;
  left: 5px;
  width: 0;
  height: 0;
  border-top: 20px solid;
  border-left: 80px solid;
  border-color: lightblue transparent transparent;
  margin-left: 190px;
  transform: rotate(-70deg);
}

.tie5 {
  position: absolute;
  top: 301px;
  left: 35px;
  width: 0;
  height: 0;
  border-top: 20px solid;
  border-right: 80px solid;
  border-color: lightblue transparent transparent;
  margin-left: 90px;
  transform: rotate(70deg);
}

.clothes {
  width: 180px;
  height: 180px;
  background-color: # 000;
  position: absolute;
  top: 270px;
  left: 110px;
  z-index: -1;
}

.leftHandCom {
  z-index: -1;
  position: absolute;
  width: 50px;
  height: 0;
  border-bottom: 140px solid # 000;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-radius: 10px;
  margin-left: 90px;
  top: 270px;
  transform: rotate(10deg);
}

.rightHandCom {
  z-index: -1;
  position: absolute;
  width: 50px;
  height: 0;
  border-bottom: 140px solid # 000;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-radius: 10px;
  margin-left: 240px;
  top: 270px;
  transform: rotate(-10deg);
}

.leftHand {
  width: 30px;
  height: 30px;
  border: 1px solid # 000;
  margin-top: 125px;
  margin-left: 5px;
  border-radius: 50%;
}

.rightHand {
  width: 30px;
  height: 30px;
  border: 1px solid # 000;
  margin-top: 125px;
  margin-left: 15px;
  border-radius: 50%;
}
Copy the code