当前位置：网站首页 > 创业 > 正文

如何用CSS绘制各种各样的形状

张子豪 2025-10-11 22:15 1

我们可以用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;
}
6
鸡蛋
.egg {
width: 120px;
height: 160px;
background: #f61344;
border-radius: 60px 60px 60px 60px/100px 100px 60px 60px;
}
7
爱心、心形
.heart {
width: 100px;
height: 100px;
background: #f61344;
position: relative;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.heart::before,
.heart::after {
content: "";
background: #f61344;
position: absolute;
}
.heart::before {
width: 50px;
height: 100px;
border-radius: 50px 0 0 50px;
left: -49px;
top: 0;
}
.heart::after {
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
top: -49px;
left: 0;
}
道理：有一个正方形和两个半光滑油滑过定位叠加组合在一路，然后再扭转变形。
8
太极八卦阵图：
.taiji {
width: 140px;
height: 70px;
background: #fff;
border: 1px solid #f61344;
border-top: 71px solid #f61344;
border-radius: 100%;
position: relative;
}
.taiji::before,
.taiji::after {
content: "";
width: 20px;
height: 20px;
border-radius: 100%;
position: absolute;
top: -35px;
}
.taiji::before {
background: #f61344;
border: 25px solid #fff;
left: 0;
}
.taiji::after {
background: #fff;
border: 25px solid #f61344;
right: 0;
}
9
水滴
.watter {
width: 120px;
height: 120px;
background: #f61344;
border-radius: 60px 60px 0 60px;
}
10
特别外形--四爷花瓣展示
html静态
<div class="flower-menu">
<span class="flower1"></span>
<span class="flower2"></span>
<span class="flower3"></span>
<span class="flower4"></span>
</div>
css样式
.flower-menu {
width: 210px;
}
.flower1,
.flower2,
.flower3,
.flower4 {
display: block;
float: left;
width: 100px;
height: 100px;
background: #EC0465;
}
.flower1 {
border-radius: 50px 50px 0 50px;
margin: 0 10px 10px 0;
}
.flower2 {
border-radius: 50px 50px 50px 0;
}
.flower3 {
border-radius: 50px 0 50px 50px;
margin-right: 10px;
}
.flower4 {
border-radius: 0 50px 50px 50px;
}
11
无限符号
.infinite {
width: 168px;
height: 84px;
position: relative;
}
.infinite::before,
.infinite::after {
content: "";
width: 80px;
height: 80px;
border: 2px solid #EC0465;
position: absolute;
bottom: 0;
}
.infinite::before {
border-radius: 40px 40px 0 40px;
left: 0;
transform: rotate(-45deg);
}
.infinite::after {
border-radius: 40px 40px 40px 0;
left: 116px;
transform: rotate(45deg)
}
12
三角形
.lf-regular-triangle,
.rt-regular-triangle,
.bot-regular-triangle,
.top-regular-triangle {
width: 0;
height: 0;
border: 30px solid transparent;
}
.lf-regular-triangle {
border-left-color: #EC0465;
}
.rt-regular-triangle {
border-right-color: #EC0465;
}
.bot-regular-triangle {
border-bottom-color: #EC0465;
}
.top-regular-triangle {
border-top-color: #EC0465;
}
13
.triangle-bot1 {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 60px solid #EC0465;
}
.triangle-top1 {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 60px solid #EC0465;
}
14
/* 直角三角形 */
.toplf-triangle {
width: 0;
height: 0;
border-top: 100px solid #EC0465;
border-right: 100px solid transparent;
}
.rtbot-triangle {
width: 0;
height: 0;
border-bottom: 100px solid #EC0465;
border-left: 100px solid transparent;
}
.lfbot-triangle {
width: 0;
height: 0;
border-bottom: 100px solid #EC0465;
border-right: 100px solid transparent;
}
.toprt-triangle {
width: 0;
height: 0;
border-top: 100px solid #EC0465;
border-left: 100px solid transparent;
}
15
.toplf-triangle1 {
width: 0;
height: 0;
border-top: 100px solid #EC0465;
border-right: 50px solid transparent;
}
.lfbot-triangle1 {
width: 0;
height: 0;
border-bottom: 100px solid #EC0465;
border-right: 50px solid transparent;
}
.lfbot-triangle2 {
width: 0;
height: 0;
border-bottom: 50px solid #EC0465;
border-right: 100px solid transparent;
}
.toplf-triangle2 {
width: 0;
height: 0;
border-top: 50px solid #EC0465;
border-right: 100px solid transparent;
}
16
平行四边形
.pxsbx1 {
width: 160px;
height: 100px;
background: #EC0465;
transform: skew(30deg);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
}
.pxsbx2 {
width: 160px;
height: 100px;
background: #EC0465;
transform: skew(-25deg);
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
}