這里說(shuō)的用css做圖形，其實(shí)是使用一個(gè)html元素，結(jié)合它的偽元素 ::before & ::after (不需要其他額外的非偽元素的html元素)，然后定義樣式來(lái)生成所需的圖形。

這里不是說(shuō)不可以使用其它的html元素，只是這樣的好處是在html方便引入，而不需要每次引入都需要添加大量的html片段(夸張說(shuō)法)。可以先預(yù)覽演示地址

主要方法

可以使用的樣式屬性如下：

* border

* border-radius

* transform

* box-shadow

為了兼容性，使用pseudo-elements(::before, ::after) 和上面樣式屬性中的一種或幾種隨機(jī)組合。

當(dāng)然，在前端我們經(jīng)常使用的時(shí)svg和font-icon。

還用一種是css3的shape-outside實(shí)現(xiàn)文本環(huán)繞的效果。

下面主要介紹第一種。

目錄

幾何圖形

星形

卡通圖形

圖標(biāo)圖形

鉆石圖形

其他

圖形列表

shape-square

shape-rctangle

shape-circle

shape-oval

shape-cone

shape-trapezoid

shape-parallelogram

shape-pentagon

shape-hexagon

shape-octagon

shape-triangle-up

shape-triangle-down

shape-triangle-left

shape-triangle-right

shape-triangle-top-left

shape-triangle-top-right

shape-triangle-bottom-left

shape-triangle-bottom-right

shape-curve-arrow

shape-star-5

shape-star-6

shape-burst-12

shape-burst-8

shape-heart

shape-infinity

shape-diamond-square

shape-diamond-narrow

shape-diamond-shield

shape-diamond-cut

shape-egg

shape-pacman

shape-talk-bubble

shape-yin-yang

shape-badge-ribbon

shape-space-invader

shape-tv

shape-mangnifying-glass

shape-facebook

shape-moon

shape-flag

shape-cross

shape-base

shape-pointer

shape-lock

總結(jié)

以上是生活随笔為你收集整理的html css 怎么画星形,CSS画各种图形（五角星、吃豆人、太极图等）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。