div+css 组成的人

来源:互联网 发布:黑魂3美女捏脸数据 编辑:程序博客网 时间:2024/06/07 06:39

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

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、倒三角的实现


1 0