超实用的CSS绘图方法,赶紧瞧瞧吧

作者:ued.021team.com
浏览数:
时间:2020-06-12
  以前绘制图形只能通过一些图像编辑软件实现,对于一些复杂且不规则的图形,绘制起来非常的麻烦。但是现在使用CSS3就不用担心这个问题,它有一个非常方便的作用,那就是我们可以利用它绘制各种各样的图形,不管是规则的图形还是不规则的图形,都可以利用CSS3进行绘制,可以降低我们使用图片的频率。

  利用CSS3绘制图形,你只需要掌握一些新增的CSS属性,比如transform、border-radius等,一些绘制起来比较麻烦的图形也可以轻松实现。

  更值得大家注意的是,CSS能够对网页中元素位置的排版进行像素级精确控制,用css制作的图片不仅加载速度更快,还可以通过代码控制图形的大小以及颜色,方便后期修改。下面就教大家用css来制作一些简单又实用的图形。

  圆形

  圆形是比较常见的一个图形,那么如何利用CSS进行绘制呢?我们先写一个div盒模块,再设置一个ID。

  <div id="circle"></div> 

  圆形很简单,让div盒模块宽高相等,然后设置border-radius属性为50%即可:

  #circle{

  width:150px;

  height:150px;

  background:#e4393c;

  border-radius:50%;

  }

  正方形

  正文形是最简单的了,只要设置宽高相等就可以了。

  <div id="square"></div>

  #square{

  width:120px;

  height:120px;

  background:#99ffc0;

  }

  长方形

  与正方形一样,CSS制作长方形也很简单,保证div模块的宽高不相等就行了:

  <div id="rectangle"></div>

  #rectangle{

  width:220px;

  height:120px;

  background:#734490;

  }

  椭圆形

  椭圆其实就是长方形的变身,只要在长方形的代码中把它变成加一个border-radius属性就可以了:

  <div id="oval"></div>


  #oval{

  width:300px;

  height:150px;

  background:#e4393c;

  border-radius:150px/75px;

  }

  三角形

  三角形的制作,主要涉及到的知识点是border属性,只需要通过修改设置不同border的透明效果,就能实现出三角形状。此外,在制作三角形的过程中,宽度和高度都需要设置为0。

  <div id="triangle"></div>

  #triangle{

  width:0;

  height:0;

  border-bottom:120px solid#e4393c;

  border-left:60px solid transparent;

  border-right:60px solid transparent;

  }

  倒三角形

  原理相同,只不过设置的是border-top、border-left和border-right三条边的属性,反向设置,就是倒过来的三角形了,就不做多余的解释:

  #triangle{

  width:0;

  height:0;

  border-top:120px solid#CCFF66;

  border-left:60px solid transparent;

  border-right:60px solid transparent;

  }

  菱形

  菱形看上去比较难,其实也很简单,只是把2个三角形接合在一起,就形成了菱形,这里要使用的是一个新的属性,叫transform,意为旋转,后面还有很多图形需要用到这个属性。

  #diamond{

  width:120px;

  height:120px;

  background:#CCFF66;

  transform:rotate(-45deg);

  transform-origin:0 10o%;

  margin:60px 0 10px 310px;

  }

  梯形

  梯形是三角形的一个变体,设置CSS梯形时,左右两条边设置为相等,并且给它设置一个宽度。

  #trapezium{

  height:0;

  width:120px;

  border-bottom:120px solid#CCFF66;

  border-left:60px solid transparent;

  border-right:60px solid transparent;

  }

  平行四边形

  平行四边形也很简单,只是一个长方形,变倾斜了而已,先写一个长方形,再给它一个transform属性:

  #parallelogram{

  width:160px;

  height:10opx;

  background:#CCFF66;

  transform:skew(30deg);

  }

  星形

  五角星是很复杂的图形,基本是css制作图形中最复杂的一个了。主要是通过使用transform属性和添加伪类的方式来实现的。

  #star{

  display:block;

  width:0;

  height:0;

  margin:50px 0;

  color:#fc2e5a;

  position:relative;

  border-right:1oopx solid transparent;

  border-bottom:70px solid#fc2e5a;

  border-left:1oopx solid transparent;

  transform:rotate(35deg);

  }

  #star:before{

  height:0;

  width:0;

  position:absolute;

  display:block;

  top:-45px;

  left:-65px;

  border-bottom:80px solid#fc2e5a;

  border-left:30px solid transparent;

  border-right:30px solid transparent;

  content:'';

  transform:rotate(-35deg);

  }

  #star:after{

  content:'';

  width:0;

  height:0;

  position:absolute;

  display:block;

  top:3px;

  left:-105px;

  color:#fc2e5a;

  border-right:1oopx solid transparent;

  border-bottom:70px solid#fc2e5a;

  border-left:1oopx solid transparent;

  transform:rotate(-70deg);

  }

  六角星形
  和五角星的制作方法不同,六角星形状的制作方法是操纵border属性来制作两半图形,然后合并它们。

  #star_six{

  width:0;

  height:0;

  display:block;

  position:absolute;

  border-left:50px solid transparent;

  border-right:50px solid transparent;

  border-bottom:1oopx solid#de34f7;

  margin:10px auto;

  }

  #star_six_points:after{

  content:"";

  width:0;

  height:0;

  position:absolute;

  border-left:50px solid transparent;

  border-right:50px solid transparent;

  border-top:1oopx solid#de34f7;

  margin:30px 0 0-50px;

  }

  八角形
  八角形不很常用,但制作的方法可以有很多种,这里的制作方法是,先通过制作两个大小相同的梯形,然后再通过两边添加三角形制作出来的。

  #octagon{

  width:1oopx;

  height:1oopx;

  background:#ac60ec;

  position:relative;

  }

  #octagon:before{

  content:"";

  width:42px;

  height:0;

  position:absolute;

  top:0;

  left:0;

  border-bottom:29px solid#ac60ec;

  border-left:29px solid#f4f4f4;

  border-right:29px solid#f4f4f4;

  }

  #octagon:after{

  content:"";

  width:42px;

  height:0;

  position:absolute;

  bottom:0;

  left:0;

  border-top:29px solid#ac60ec;

  border-left:29px solid#f4f4f4;

  border-right:29px solid#f4f4f4;

  }

  心形
  心形跟星形都是比较复杂的图片,严格意义上来说,都是拼接图片,并不是一个div能够实现的图片,这里就体现了伪元素before和after的灵活性,再通过修改transform-origin属性来元素的旋转中心点。最终实现心形。

  #heart{

  position:relative;

  }

  #heart:before,#heart:after{

  content:"";

  width:70px;

  height:115px;

  position:absolute;

  background:red;

  left:70px;

  top:0;

  border-radius:50px 50px 0 0;

  transform:rotate(-45deg);

  transform-origin:0 1oo%;

  }

  #heart:after{

  left:0;

  transform:rotate(45deg);

  transform-origin:1oo%1oo%;

  }

  无穷符号
  无穷符号和前面制作方法类似,也是设置border属性和添加伪类元素的角度来制作的:

  #infinity{

  width:220px;

  height:1oopx;

  position:relative;

  }

  #infinity:before,#infinity:after{

  content:"";

  width:60px;

  height:60px;

  position:absolute;

  top:0;

  left:0;

  border:20px solid#06c999;

  -moz-border-radius:50px 50px 0;

  border-radius:50px 50px 0 50px;

  transform:rotate(-45deg);

  }

  #infinity:after{

  left:auto;

  right:0;

  border-radius:50px 50px 50px 0;

  transform:rotate(45deg);

  }

  消息提示框

  消息提示框是通过先制作一个矩形,然后再其他位置利用伪类元素添加一个小三角形,做装饰,制作出来的:

  #comment_bubble{

  width:140px;

  height:1oopx;

  background:#088cb7;

  position:relative;

  border-radius:12px;

  }

  #comment_bubble:before{

  content:"";

  width:0;

  height:0;

  right:1oo%;

  top:38px;

  position:absolute;

  border-top:13px solid transparent;

  border-right:26px solid#088cb7;

  border-bottom:13px solid transparent;

  }

  吃豆人

  吃豆人看上去是一个不规则的图形,其实它的制作方法很简单,可以通过转化,先在一个圆形里面制作一个透明的三角形,就可以完成了,非常简单。

  #pacman{

  width:0;

  height:0;

  border-right:70px solid transparent;

  border-top:70px solid#ffde00;

  border-left:70px solid#ffde00;

  border-bottom:70px solid#ffde00;

  border-radius:70px;

  }

  小结

  CSS3为我们提供了制作各种复杂几何图形的能力,我们可以在页面中制作各种图形。


  关注我们,收获更多品牌设计、网站开发、定制软件开发、小程序开发、SEO推广知识