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

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

主要方法

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

* border

* border-radius

* transform

* box-shadow

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

當然，在前端我們經常使用的時svg和font-icon。

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

下面主要介紹第一種。

目錄

幾何圖形

星形

卡通圖形

圖標圖形

鉆石圖形

其他

圖形列表

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。