玩转border-radius，用CSS来画一个花式流程图~

用Html标签和css来写一个花式流程图，先看这张已经完工的流程图，一个白色圆形，中心是文字，围绕它周围的是8个彩色的花瓣，花瓣中间有文字。另外圆环周围缺角的三角形部分分别对应的是花瓣的颜色。

难点分析：

1、如何div布局。要Html代码简洁，又要css好写，后期好修改。可以分为两部分，花瓣一部分，中心圆环一部分。

2、花瓣的形状以及定位。花瓣可以用圆角border-radius来实现圆角，position: absolute绝对定位以及transform: rotate旋转来给每个花瓣设定位置。

3、小三角形的画法。三角形的实现可以将元素的高宽设置为0，然后给其中的一边，比如border-left-color设置颜色，其他颜色为透明色。具体后面会讲解到。

分析完了以后好像也没有什么难点，那接下来就一步步完成：

一、整体居中

这是一个流程图，所以我就用拼音liucheng给他起个类名。

1 2	<div class="liucheng"> </div>

CSS样式表中将元素设置为绝对定位，高宽设置为600px，距离左边，顶部的距离为50%，再减去一半的距离值，这样就居中了。

1 2 3 4 5 6 7 8 9

.liucheng {     position: absolute;     left: 50%;     top: 50%;     width: 600px;     height: 600px;     margin-top: -300px;     margin-left: -300px; }

二、画花瓣

花瓣的形状可以用圆形，也可以用椭圆形画。圆形基本上没有什么难点，设置一个高宽170px的正方形，再定义border-radius圆角属性为100%就可以画一个圆。那如果是画我们常见的花瓣形呢？用border-radius也能实现，略微调整一下各个方向的值。

1 2 3

width: 170px; height: 170px; border-radius: 0px 60% 50% 60%;

还可以再做一下微调，比如设置为border-radius: 0px 57% 21% 66%

接下来其他花瓣也用类似的方法画，但因CSS会用到transform属性的旋转值，花瓣上的文字也会跟着旋转，而且文字还会模糊不清晰。所以可用伪元素:after来画花瓣形状，这样就避免了文字也跟着旋转还不清晰的问题。

1 2 3 4 5 6 7 8 9 10

<ul class="circle">   <li class="a"></li>   <li class="b"></li>   <li class="c"></li>   <li class="d"></li>   <li class="e"></li>   <li class="f"></li&