div+css 組成的人_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、倒三角的實現