CSS3特殊图形制作

CSS3特殊图形制作

现在IE8+的浏览器都支持CSS3+HTML5了，IE8及以下的浏览器的浏览器也快告一段落了，大前端的时代来了。废话不多说，现在开始用CSS3画图

1、心型

//HTML

<div class="box"></div>

//css3

<style>
    .box{
        position: relative;
        width: 160px;
        height: 160px;
        border: 1px solid red;
    }
    .box:before{
        position: absolute;
        left: 20px;
        width: 80px;
        height: 120px;
        content: '';
        background: #f00;
        border-radius: 100px 100px 0 0;
        transform: rotate(-45deg);
    }
    .box:after{
        position: absolute;
        left: 48px;
        top: 0px;
        width: 80px;
        height: 120px;
        content: '';
        background: #f00;
        border-radius: 100px 100px 0 0;
        transform: rotate(45deg);
    }
</style>

2、太极符

//HTML

<div class="box"></div>

//CSS3

<style>
    .box{
        position: relative;
        width: 96px;
        height: 48px;
        border-color: #000;
        border-style: solid;
        border-width: 2px 2px 50px 2px;
        background: #fff;
        border-radius: 100%;
    }
    .box:before{
        position: absolute;
        top: 50%;
        left: 0;
        width: 12px;
        height: 12px;
        border: 18px solid #000;
        background: #fff;
        content: '';
        border-radius: 100%;
    }
    .box:after{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12px;
        height: 12px;
        border: 18px solid #fff;
        background: #000;
        content: '';
        border-radius: 100%;
    }
</style>

 

3、扇形

 

//html

<div class="box"></div>

//css3
<style>
    .box{
        width: 0;
        height: 0;
        border: 60px solid yellow;
        border-color: yellow transparent yellow yellow;
        border-radius: 60px;
    }
</style>