Div+css composed of people _css

hahaha, boring time, casually wrote a point, this phase of work is not busy, ha ha, very happy

CSS is as follows:

<style type= "Text/css" > rectangle{width:200px;
        height:50px;
        border-radius:10px;
        Background-color:pink;
        Position:relative}. rectangle::before{content: "";
        width:0;
        height:0;
        border:15px solid Pink;
        Border-color:pink transparent transparent transparent;
        Position:absolute;
        Bottom: -30px;
    left:40px;
        }. face{width:100px;
        height:100px;
        BORDER:2PX solid black;
        border-radius:50%;
        margin:10px 0 0 50px}. nose{width:0;
        height:0;
        margin:45px 0 0 35px;
        border-left:12px solid Transparent;
        border-right:12px solid Transparent;
    BORDER-BOTTOM:24PX solid red;
        }. mouth{width:30px;
        height:15px;
        BORDER:1PX solid black;
        margin:10px 0 0 33px; border-radius:0 0 30px 30px}.
   leg{width:100px;     height:100px;
        border:0px solid black;
        margin:133px 0 0 0;
        Float:left}. leftleg{width:130px;
        height:1px;
        Background-color:black;
        MARGIN:56PX 0 0 0;
        Transform:rotate (120deg)}. rightleg{width:130px;
        height:1px;
        Background-color:black;
        margin:54px 0 0-32px;
        Transform:rotate (60deg)}. hand{width:196px;
        BORDER:1PX solid black;
        margin:30px 0 0 7px;
        Position:absolute}. standbody{width:1px;
        height:133px;
        BORDER:1PX solid black;
        Background-color:black;
        margin:0 0 0 100px;
        Position:absolute}. lefteye{width:28px;
        height:14px;
        BORDER:1PX solid black;
        margin:25px 10px 0 15px;
        Float:left;
        BORDER-RADIUS:14PX/7PX}. righteye{width:28px;
        height:14px; border:1px Solid BLCC);
        margin:25px 0 0 0;
        Float:left;
        BORDER-RADIUS:14PX/7PX}. lefteyeball{width:13px;
        height:13px;
        BORDER:1PX solid black;
        Background-color:black; margin:0
        0 0 6px;
        border-radius:50%}. righteyeball{width:13px;
        height:13px;
        BORDER:1PX solid black;
        Background-color:black; margin:0
        0 0 6px; border-radius:50%} </style>

HTML is as follows:

<div style= "position:relative" >
    <div class= "Rectangle" >
        <span > I am beautiful. haha haha ha ha </span>
    </div>
    <div class= "Face" >
        <div class= "Lefteye" >
            < Div class= "Lefteyeball" ></div>
        </div>
        <div class= "Righteye" >
            <div class= " Righteyeball "></div>
        </div>
        <div class=" nose "></div>
        <div class=" Mouth "></div>
    </div>
    <div class=" Hand "></div>
    <div class=" Standbody "></div>
    <div class=" Leg ">
        
The knowledge points used are as follows:

1, positioning

Position:relative relative positioning



Absolute absolute Positioning

2, Flip


Transform:rotate (120DEG)
Flip a straight line

3, rounded corners


border-radius:50%;
 

 

4, margin


 
margin:10px 2px 3px 0;
 
The distance from the top margin is 10px,
 
 
Distance from the right is 2px,
 
3PX from the bottom margin,
 
0 distance to left margin
 
5, the realization of the inverted triangle