您当前的位置:首页 > 网站制作 > 前端设计

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

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

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

难点分析:

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;
}

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

二、画花瓣

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

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

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

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

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

接下来其他花瓣也用类似的方法画,但因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);
}

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

最后再把花瓣上的文字加上,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
}

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

三、画圆

中心这个圆看起来有三层,但只要画一个中心圆就可以,其他可以用伪元素: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;
}

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

: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%;
}

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

四、画三角形

三角形实现方法:

1、高宽设置为0。

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

3、定义一条边的颜色。

举例:

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

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

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

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

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

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

五、加上文字

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

<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;
}

最后实现的效果图如下:

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

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

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

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

 

你觉得文章内容怎么样

阿里云代金券 100 云产品通用

有效期30天 首购用户

立即领取
阿里云代金券 100 云产品通用

有效期30天 复购+升级

立即领取