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

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

难点分析：

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

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

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

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

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

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

最后再把花瓣上的文字加上，Html文档中我用到了section标签，注意标签section一定要有h标签，这是很多前端设计新手容易犯的错，其实我以前也这样，后面用W3C css验证才发现这个问题。