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

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

难点分析：

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

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

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

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

一、整体居中

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

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

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

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

二、画花瓣

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

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

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

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

<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>
  <li class="g"></li>
  <li class="h"></li>
 </ul>

先把li默认的样式去掉，然后把花瓣高宽设置为170像素，绝对定位。接下来再分别把8个花瓣的top,right,bottom,left其中两个方向写出来。

.circle {
    list-style-type: none
}

.circle li {
    width: 170px;
    height: 170px;
    position: absolute;
}

.circle li.a {
    top: 4px;
    left: 128px;
}

.circle li.b {
    top: 3px;
    right: 129px;
}

.circle li.c {
    top: 119px;
    right: 5px;
}

.circle li.d {
    top: 288px;
    left: 425px;
}

.circle li.e {
    bottom: 25px;
    left: 301px;
}

.circle li.f {
    bottom: 24px;
    left: 128px;
}

.circle li.g {
    top: 288px;
    left: 4px;
}

.circle li.h {
    top: 121px;
    left: 5px;
}

每个花瓣都是用绝对定位position: absolute 并且分别对元素设置颜色，再进行角度旋转。

.circle li:after {
    position: absolute;
    content: "";
    width: 170px;
    height: 170px;
    border-radius: 0px 60% 50% 60%;
}

.circle li.a:after {
    background: #adca35;
    transform: rotate(202deg);
}

.circle li.b:after {
    background: #48b0c7;
    transform: rotate(247deg);
}

.circle li.c:after {
    background: #1e57a5;
    transform: rotate(294deg);
}

.circle li.d:after {
    background: #523f9b;
    transform: rotate(341deg);
}

.circle li.e:after {
    background: #da59a8;
    transform: rotate(21deg);
}

.circle li.f:after {
    background: #d92e5d;
    transform: rotate(68deg);
}

.circle li.g:after {
    background: #f67632;
    transform: rotate(112deg);
}

.circle li.h:after {
    background: #fdd23c;
    transform: rotate(158deg);
}

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

 <ul class="circle">
  <li class="a"><section><i>1</i><h3>客服沟通</h3></section></li>
  <li class="b"><section><i>2</i><h3>确定需求</h3></section></li>
  <li class="c"><section><i>3</i><h3>资料整理</h3></section></li>
  <li class="d"><section><i>4</i><h3>签订合同</h3></section></li>
  <li class="e"><section><i>5</i><h3>方案设计</h3></section></li>
  <li class="f"><section><i>6</i><h3>设计定稿</h3></section></li>
  <li class="g"><section><i>7</i><h3>程序部署</h3></section></li>
  <li class="h"><section><i>8</i><h3>网站运营</h3></section></li>
 </ul>

给section标签设置绝对定位，层叠顺序为数字9，目前在最上层。距离父元素顶部30%，距离左边30%。标签i会默认定义文字为斜体，所以这里也要将字体定义为normal标准字体。

.circle li section {
    position: absolute;
    z-index: 9;
    top: 30%;
    left: 30%;
    color: #fff;
}

.circle li section i {
    font-style: normal; /* 定义为normal标准字体*/
    font-size: 20px;
    display: block;
    margin-bottom: 10px;
    text-align: center;
}

.circle li section h3 {
    font-size: 18px
}

三、画圆

中心这个圆看起来有三层，但只要画一个中心圆就可以，其他可以用伪元素:before,:after。

<div class="big"></div>

首先画一个宽400px，高380px的圆，这个圆有一个半透明的效果，CSS3支持背景半透明的写法语法格式是:background: rgba(0,0,0,.5)。.5其实就是0.5，css里面通常简写就省略了0

.big {
    width: 400px;
    height: 380px;
    background: rgba(0,0,0,.1);
    border-radius: 100%;
    position: absolute;
    left: 100px;
    top: 100px;
}

:before画一个宽270px，高260px的圆，定义边框为1px的灰色实线；:after为宽340px，高330px的圆形。

.big:before {
    content: "";
    width: 270px;
    height: 260px;
    border: #e5e5e5 1px solid;
    position: absolute;
    left: 63px;
    top: 58px;
    border-radius: 100%;
    z-index: 1;
    background: #fff;
}

.big:after {
    content: "";
    width: 340px;
    height: 330px;
    background: #fff;
    position: absolute;
    left: 30px;
    top: 24px;
    border-radius: 100%;
}

四、画三角形

三角形实现方法：

1、高宽设置为0。

2、定义边框宽度，比如10px的实线，颜色透明。

3、定义一条边的颜色。

举例：

    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left-color: #48b0c7;

可能有些人还不是很理解，接下来我设置一下其他边的颜色：

通过观察上图，当元素定义高宽为0时，设置其各边的属性值以及颜色，就可以轻松实现一个三角形了。接下来就把其他的三角形都一起画出来吧。

五、加上文字

这部分是最简单的，主要是定位，然后设置文字的字体大小，颜色，文字的上下边框。

<div class="text">
      <h3>合作流程</h3>
      <p>COOPERATION <span>PROCESS</span></p>
</div>

.text {
    position: absolute;
    z-index: 9;
    top: 37%;
    left: 27%;
    text-align: center;
}

.text h3 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #a8aaba
}

.text p {
    color: #a8aaba;
    border-top: #d2d2da 1px solid;
    border-bottom: #d2d2da 1px solid;
    padding: 5px 0;
}

最后实现的效果图如下：

开头部分说可以是花瓣形状的，那调整下花瓣，看看什么效果呢？

最后附上源码下载地址→https://www.tjcblog.com/hslct.html