CSS绘制各种各样的形状图形

实心圆

[CSS] 纯文本查看 复制代码

.circle {
    width: 120px;
    height: 120px;
    background: #317ef3;
    border-radius: 100%;
}

空心圆

[CSS] 纯文本查看 复制代码

.ring {
    width: 120px;
    height: 120px;
    border: 10px solid #317ef3;
    border-radius: 100%;
    box-sizing: border-box;
}

半圆

[CSS] 纯文本查看 复制代码

//上半圆
.top-semicircle {
    width: 120px;
    height: 60px;
    background: #317ef3;
    border-radius: 60px 60px 0 0;
    /*顺时针方向，四个值依次分别表示左上、右上、右下、左下*/
}
//右半圆
.rt-semicircle {
    width: 60px;
    height: 120px;
    background: #317ef3;
    border-radius: 0 60px 60px 0;
}

//左半圆
.lf-semicircle {
    width: 60px;
    height: 120px;
    background: #317ef3;
    border-radius: 60px 0 0 60px;
}

//下半圆
.bot-semicircle {
    width: 120px;
    height: 60px;
    background: #317ef3;
    border-radius: 0 0 60px 60px;
}

鸡蛋

[CSS] 纯文本查看 复制代码

.egg {
    width: 100px;
    height: 150px;
    background: #317ef3;
    border-radius: 50px 50px 50px 50px/90px 90px 60px 60px;
}