利用CSS制作图形效果

前言

　　关于如何使用CSS来制作图形，比如说圆形，半圆形，三角形等的相关教程还是挺多的，今天我主要想解释一下里面一些demo的实现原理，话不多说，开始吧

 

以下所有内容只使用一个HTML元素。任何类型的CSS，只要它至少在一个浏览器中支持。

一.　　实现一个心形

#heart { 
            position: relative; 
            width: 100px; 
            height: 90px; 
        } 
        #heart:before{ 
            position: absolute; 
            content: ""; 
            left: 50px; 
            top: 0; 
            width: 50px; 
            height: 80px; 
            background: red; 
            -moz-border-radius: 50px 50px 0 0;
            -webkit-border-radius: 50px 50px 0 0;
             border-radius: 50px 50px 0 0; 
            -webkit-transform: rotate(-45deg); 
            -moz-transform: rotate(-45deg); 
            -ms-transform: rotate(-45deg); 
            -o-transform: rotate(-45deg); 
            transform: rotate(-45deg); 
　　　　　　　-webkit-transform-origin: 0 100%; 
            -moz-transform-origin: 0 100%; 
            -ms-transform-origin: 0 100%; 
            -o-transform-origin: 0 100%; 
            transform-origin: 0 100%; 
            } 

  #heart:after { 
            left: 0; 
    position: absolute; 
            content: ""; 
            top: 0; 
            width: 50px; 
            height: 80px; 
            background: red; 
            -moz-border-radius: 50px 50px 0 0;
            -webkit-border-radius: 50px 50px 0 0;
             border-radius: 50px 50px 0 0; 
                -webkit-transform: rotate(45deg); 
                -moz-transform: rotate(45deg); 
                -ms-transform: rotate(45deg); 
                -o-transform: rotate(45deg); 
                transform: rotate(45deg); 
                -webkit-transform-origin: 100% 100%; 
                -moz-transform-origin: 100% 100%; 
                -ms-transform-origin: 100% 100%; 
                -o-transform-origin: 100% 100%; 
                transform-origin :100% 100%; 
            }

效果

原理：这个心形主要是由两部分交叠组成

border-radius: 50px 50px 0 0;
/* 等价于 */
border-top-left-radius: 50px;
border-top-right-radius: 50px;

实现如下效果

再利用transfrom变换 得到如下，再进行交叠组成。

 

tip：合理地利用伪元素以及css border-radius属性以及transform变换属性

 

 二. 饼图

即使是最简单的只有两种颜色的形式，用Web技术创建也并不简单

尽管这个东西并不像它曾经看起来那么难以实现，但是也没有什么直接并且简单的方法。但是，现在已经有很多更好、更易于维护的方式来实现它

.pie{
  width:50px;
  height:50px;
  position:relative;
  background: linear-gradient(90deg,#eee 50%,green 0); 
  border-radius:50%
}

第一步：先画一个圆（饼图特效颜色为 green）

第二步：利用伪元素添加一个蒙版

.pie::before{
  position:absolute;
  content:'';
  width:50%;
  height:100%;
  background: #eee;
/* 当饼图比例大于一半的时候 */
/*  background: green; */
  border-radius:50px 0 0 50px; 
}

第三步：利用transform的变换 改变角度，实现自己需要的角度

  transform:rotate(20deg);
  transform-origin:100% 50%;

     

 

注：伪元素的旋转变换中心应该设置为圆心

 

结束语

　　暂时先说明了两个图形，都是采用CSS或者部分采用了CSS3的属性制作出来的，大家还可以点击CSS3- Tricks 提供的《The Shapes of CSS》里面展示了十多种图形的制作方法。由于部分图形效果使用了CSS3的部分属性，所以在ie的效果可能无法显示。使用css制作三角和圆有效果应用还是很多了，特别是用来制作tips效果