使用border-radius画出圆形、半圆、鸡蛋和爱心

最近学习了一下border-radius属性，试着自己使用这个属性画一下常见图形，效果如下：

一、圆形

画出圆心就很简单，设置为50%即可,代码如下：

.circular1 {
            width: 150px;
            height: 150px;
            background-color: #00A2FF;
            border-radius: 50%;
        }

二、半圆

半圆我想出两种方法，一种画出两个四分之一圆进行拼接，第二种是将下半部分裁剪，代码如下：

/* 半圆的第一种方法 */
        .half-circular1 {
            width: 75px;
            height: 75px;
            background-color: #00A2FF;
            border-radius: 0px 100% 0px 0px;
        }

        .half-circular2 {
            width: 75px;
            height: 75px;
            background-color: #00A2FF;
            border-radius: 0px 0px 100% 0px;
        }
        /* 半圆的第二种方法 */

        #c {
            width: 150px;
            height: 75px;
            border: 1px red solid;
            overflow: hidden;
            float: left;
            margin-right: 10px
        }
        .half-circular3 {
            width: 150px;
            height: 150px;
            background-color: #00A2FF;
            border-radius: 50%;
        }

三、鸡蛋

这个需要对水平方向和垂直方向进行操作，两组值由/分隔，代码如下：

.egg {
            width: 100px;
            height: 150px;
            background-color: #00A2FF;
            border-radius: 100% 100% 100% 100%/180px 180px 100px 100px;
        }

四：爱心

先做出上面是圆形，下方是长方形的拱门，再进行旋转即可得到，代码如下：

.heart::before {

            content: "";

            position: absolute;

            left: 20px;

            width: 70px;

            height: 115px;

            background: red;

            border-radius: 50px 50px 0 0;

            -webkit-transform: rotate(-45deg);

            -moz-transform: rotate(-45deg);

            -o-transform: rotate(-45deg);

            transform: rotate(-45deg);

            -webkit-transform-origin: left bottombottom;

            -moz-transform-origin: left bottombottom;

            -o-transform-origin: left bottombottom;

            transform-origin: left bottombottom;

        }

        .heart::after {

            content: "";

            position: absolute;

            left: 53px;

            width: 70px;

            height: 115px;

            background: red;

            border-radius: 50px 50px 0 0;

            -webkit-transform: rotate(45deg);

            -moz-transform: rotate(45deg);

            -o-transform: rotate(45deg);

            transform: rotate(45deg);

            -webkit-transform-origin: rightright bottombottom;

            -moz-transform-origin: rightright bottombottom;

            -o-transform-origin: rightright bottombottom;

            transform-origin: rightright bottombottom;

        }