如何用CSS繪制各種各樣的形狀

我們可以用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);
}