SOURCE

<div class='raidal1'></div>
<div class='raidal2'></div>
<div class='raidal3'></div>
<div class='raidal4'></div>

<div class='ellipse'></div>

/* 左上 */
.raidal1 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}

/* 右上 */
.raidal2 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at right top,transparent 50%,blue 50%);
}

/* 右下 */
.raidal3 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at right bottom,transparent 50%,blue 50%);
}

/* 左下 */
.raidal4 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left bottom,transparent 50%,blue 50%);
}

/* 左上 */
.ellipse {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
}