如何用CSS绘制各种各样的形状 _浏览器（IE、火狐、谷歌等）

我们可以用css常见的属性，如：border-radius、position、transform等绘制各类常见的图形外形。如：实心圆、空心圆（也称圆环）、三角形、梯形、平行四边形、扇形、心形（爱心）、鸡蛋外形、太极八卦阵图、无限符号等

需要这些哦
浏览器（IE、火狐、谷歌等）
代码编纂器（vs code ， sublime ， hbuilder ， notepad++等）
方式/
1实心圆
.circle {
width: 120px;
height: 120px;
background: #f61344;
border-radius: 100%;
/* 圆角边框至少为高度或高度的一半 */
}

文章插图

2圆环
.ring {
width: 100px;
height: 100px;
border: 10px solid #f61344;
background: #fff;
border-radius: 100%;
}

文章插图

3半圆
/* 左半圆 */
.lf-semi-circle {
width: 60px;
height: 120px;
background: #f61344;
border-radius: 60px 0 0 60px;
/* 顺时针偏向左上角右上角右下角左下角 */
}
/* 右半圆 */
.rt-semi-circle {
width: 60px;
height: 120px;
background: #f61344;
border-radius: 0 60px 60px 0;
}
/* 上半圆 */
.top-semi-circle {
width: 120px;
height: 60px;
background: #f61344;
border-radius: 60px 60px 0 0;
}
/* 下半圆 */
.bot-semi-circle {
width: 120px;
height: 60px;
background: #f61344;
border-radius: 0 0 60px 60px;
}

文章插图

4四分之一半圆（扇形）
/* 四分之一半圆、扇形 */
.quarter-lttop-circle,
.quarter-rttop-circle,
.quarter-btlf-circle,
.quarter-btrt-circle {
width: 60px;
height: 60px;
background: #f61344;
}
.quarter-lttop-circle {
border-radius: 60px 0 0 0;
}
.quarter-rttop-circle {
border-radius: 0 60px 0 0;
}
.quarter-btlf-circle {
border-radius: 0 0 0 60px;
}
.quarter-btrt-circle {
border-radius: 0 0 60px 0
}

文章插图

5叶子、花瓣
/* 叶子、花瓣 */
.lf-leaf1,
.lf-leaf2,
.rf-leaf1,
.rf-leaf2 {
width: 120px;
height: 120px;
background: #f61344;
}
.lf-leaf1 {
border-radius: 0 60px;
}
.lf-leaf2 {
border-radius: 0 120px;
}
.rf-leaf1 {
border-radius: 60px 0;
}
.rf-leaf2 {
border-radius: 0 120px;
}