css3半圆

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        div {
            margin-bottom: 30px;
            margin-left: 30px;
        }

        /* 上半圆 */

        .semi-circle {
            width: 100px;
            height: 50px;
            background-color: #cb18f8;
            border-radius: 50px 50px 0 0;
            /* 左上、右上、右下、左下 */
        }

        /* 下半圆 */

        .semi-circle2 {
            width: 100px;
            height: 50px;
            background-color: #cb18f8;
            border-radius: 0 0 50px 50px;
            /* 左上、右上、右下、左下 */
        }

        /* 左半圆 */

        .semi-circle3 {
            width: 50px;
            height: 100px;
            background-color: #cb18f8;
            border-radius: 50px 0 0 50px;
            /* 左上、右上、右下、左下 */
        }

        /* 右半圆 */

        .semi-circle4 {
            width: 50px;
            height: 100px;
            background-color: #cb18f8;
            border-radius: 0 50px 50px 0;
            /* 左上、右上、右下、左下 */
        }

        /* 椭圆 */

        .semi-circle5 {
            width: 100px;
            height: 100px;
            border-radius: 100px 0px 100px 0px;
            background: green;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .semi-circle6 {
            border-radius: 100px 0 0;
            width: 50px;
            height: 50px;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div class="semi-circle"></div>
    <div class="semi-circle2"></div>
    <div class="semi-circle3"></div>
    <div class="semi-circle4"></div>
    <div class="semi-circle5"></div>
    <div class="semi-circle6"></div>
    <p>扇形原理：左上角是圆角，其余三个角都是直角：左上角的值为宽和高一样的值，其他三个角的值不变（等于0）。</p>
</body>

</html>
效果图：