通常我们只用CSS来控制各控件在页面中的布局，其实站在技术与艺术的交叉口我们还可以利用CSS对颜色、形状精准控制的特性来画画。
本文从用纯CSS画一个花瓣，画一张笑脸开始，然后给各个部件上色最终成型一朵太阳花。
步骤概要
- 首要任务是用CSS画一朵花瓣
- 花瓣画成后，用transform中的 rotate(30deg)函数重复11次，再在中间画个圈，太阳花的骨架就成了。
- 画眼睛和嘴巴，然后给整体上上颜色
- 希望把花做成可变大小式的（不是固定像素尺寸），即用一个css属性即可控制
步骤详解
- 第一步，画花瓣方法有很多，这里我采用的是transform配合border-radius：先画一个正方形，然后用transform的skewX(30deg)把这个正方形压扁变成===》平行四边形，用border-radius: 0 50% 50% 50%;设置三边的圆角===》花瓣出来了。
- 第二步，由于在步骤一中压扁的transform用了transform-origin: 0 0;，而现在要做的是控制花瓣样式让它绕着花心旋转，所以这时候的transform是花心的位置。我这里采用的方法是直接给花瓣弄了个父元素 ，让父元素以花心为圆心进行旋转。
- 第三步，画眼睛，直接画俩黑色的圈圈，然后再用before和after俩伪元素弄弄两个白色的点，让眼睛看起来泪汪汪的可怜状，最后再加个box-shadow,就当做化妆弄眼影了。嘴巴分成两部分，下面部分是个半圆，上面部分是有点凸起的弧线，也通过控制 border-radius: .x1 x2 0 0/y1 y2 0 0; 来实现， x1，y1为组成弧线的两条垂直宽高，x1（x2）比y1(y2) 要大挺多的，也就代表弧度比较平。上颜色就不说了，直接通过css，nth-child选择器，然后这个例子中花瓣的颜色是我根据自己拍的那张毛绒玩具照片，用取色器直接取下来的（拍摄光线原因颜色不是很精确）。
- 第四步，在一个地方想引入这朵花，场景不同宽高大小肯定是不一样的嘛。实现方法也挺多，我这边尝试了‘em’这种方案，给整体的父元素设一个font-size，然后花里面所有的尺寸都根据它来。设置这个font-size也有学问，因为一般浏览器最小的能显示像素值是12px，所以想要控制花朵大小游刃有余，在font-size：12px的时候，花朵是足够小的。
codePen 演示地址：https://codepen.io/kaikai1024/pen/VjyVNB
