1. 首頁 > 生活百科 > >

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

小知識

我們可以用css常見的屬性 ， 如：border-radius、position、transform等繪制各類常見的圖形外形 。 如：實心圓、空心圓（也稱圓環）、三角形、梯形、平行四邊形、扇形、心形（愛心）、雞蛋外形、太極八卦陣圖、無限符號等

需要這些哦
瀏覽器（IE、火狐、谷歌等）
代碼編纂器（vs code ， sublime ， hbuilder ， notepad++等）
方式/
1實心圓
.circle {
width: 120px;
height: 120px;
background: #f61344;
border-radius: 100%;
/* 圓角邊框至少為高度或高度的一半 */
}

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



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

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



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;
}

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



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
}

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



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;
}

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



6雞蛋
.egg {
width: 120px;
height: 160px;
background: #f61344;
border-radius: 60px 60px 60px 60px/100px 100px 60px 60px;
}

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



7愛心、心形
.heart {
width: 100px;

猜你喜歡