CSS3形状制作

1.阴阳八卦

    <style type="text/css">
        #yin-yang{
            position:relative;
            width:96px;
            height:48px;
            background:white;
            border-color:black;
            border-style:solid;
            border-width:2px 2px 50px 2px;
            border-radius:100%;//这里50%也是可以的，目的是把正方形变成圆
            margin:20px 100px;
            animation:myfirst 4s linear infinite;//这句代码是引用动画，需要动态的可以添加这句代码，动画定义在下方，如果不需要动态的，就无需添加这句话

        }
        #yin-yang::before,
        #yin-yang::after
        {
            content:" ";
            position:absolute;
            top:50%;
            left:0;
            width:12px;
            height:12px;
            background:white;
            border:18px solid black;
            border-radius:100%;//调成50%也是可以的
        }
        #yin-yang::after{
            left:50%;
            background:black;
            border-color:white;
        }

//定义动画
    @keyframes  myfirst{
            0%{
                transform: rotate(0deg);//当在0%时，让他旋转0度
            }
            100%{
                transform: rotate(360deg);//当在100%时，让他旋转360度
            }

    }
    </style>

见下图：

2.Heart（心形）

<style type="text/css">
        #heart{
            position:relative;
            width:100px;
            height:90px;
        }
        #heart::before,
        #heart::after{
            content:" ";
            position:absolute;
            left:50px;
            top:0;
            width:50px;
            height:80px;
            background:red;
            border-radius:50px 50px 0 0;
            transform:rotate(-45deg);//逆向旋转45度
            transform-origin:0 100%;//设置旋转元素的基点位置
        }
        #heart::after{
            left: 0;
            transform:rotate(45deg);
            transform-origin:100% 100%;
        }
    </style>

见下图：