div+css 组成的人

哈哈哈，无聊时候，随便写了点，这阶段工作不忙，哈哈哈哈，很开心呢

css如下：

<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 black;
        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如下：

<div style="position: relative">
    <div class="rectangle">
        <span >我美吗？哈哈哈哈哈哈哈哈哈哈</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">
        <hr class="leftLeg" >
    </div>
    <div class="Leg" >
        <hr class="rightLeg">
    </div>
</div>

用到的知识点如下：

1、定位

position: relative相对定位

absolute绝对定位

2、翻转

transform: rotate(120deg)

将直线翻转

3、圆角

border-radius: 50%;

4、margin

margin:10px 2px 3px 0;
距离上边距为10px，
距离右边距为2px，
距离下边距为3px，
距离左边距为0
5、倒三角的实现