html css 怎么画星形,CSS画各种图形（五角星、吃豆人、太极图等）

这里说的用css做图形，其实是使用一个html元素，结合它的伪元素 ::before & ::after (不需要其他额外的非伪元素的html元素)，然后定义样式来生成所需的图形。

这里不是说不可以使用其它的html元素，只是这样的好处是在html方便引入，而不需要每次引入都需要添加大量的html片段(夸张说法)。可以先预览演示地址

主要方法

可以使用的样式属性如下：

* border

* border-radius

* transform

* box-shadow

为了兼容性，使用pseudo-elements(::before, ::after) 和上面样式属性中的一种或几种随机组合。

当然，在前端我们经常使用的时svg和font-icon。

还用一种是css3的shape-outside实现文本环绕的效果。

下面主要介绍第一种。

目录

几何图形

星形

卡通图形

图标图形

钻石图形

其他

图形列表

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