全目录
本系列文章，主要是围绕css3属性，实现我们常见的各种效果，这些效果都是我们实战开发中经常可以用到的效果：
- css揭秘实战技巧- 背景与边框 [一]
- css揭秘实战技巧- 形状 [二]
- css揭秘实战技巧 - 视觉效果[三]
- css揭秘实战技巧 - 字体排印[四]
- css揭秘实战技巧 - 用户体验[五]
- css揭秘实战技巧 - 结构与布局[六]
- css揭秘实战技巧 - 过渡与动画[七]
前言
本节课要将的内容：
- 自适应椭圆
- 平行四边形
- 菱形图片
- 简单的饼图
- 三角形
- 总结
一：自适应椭圆
1. 正方形
css好看的显示方式？
width: 100px;
height: 100px;
background: greeen;
复制代码接下来，我们通过设置border-radius来改变一下正方形的形状：
2. 圆形
postcss、
width: 100px;
height: 100px;
background: greeen;
//border-radius: 50px;
//border-radius: 50px 50px;
//border-radius: 50%;
//border-radius: 100px;以上四种写法都可以实现圆形的效果，也就是说：border-radius的值可以是具体值，也可以是百分比(为了代码的可拓展性，最好用百分比)，同时，只要值大于正方形的长度的一半（例如：此处是50px），结果一定是圆形.
复制代码3. 单独设置四个角半径的的圆
css进阶？
width: 100px;
height: 100px;
border-radius: 50px 40px; //等价于50px 40px 50px 40px；方向依次是从左上角开始顺时针旋转！
background: green;
复制代码4. 单独设置水平方向和垂直方向的圆
css模型、代码如下：
width: 100px;
height: 100px;
border-radius: 50px / 40px; //用 / 隔开
background: green;
复制代码5.椭圆
width: 200px;
height: 100px;
border-radius: 50% / 50%; //前提是宽高不同
background: green;
复制代码6. 半椭圆
width: 100px;
height: 100px;
border-radius: 100% 0 0 100% / 50% 0 0 50%;
background: green;
复制代码7. 四分之一椭圆
代码如下：
width: 200px;
height: 100px;
border-radius: 100% 0 0 0 / 100% 0 0 0;
background: green;
复制代码二：平行四边形
我们平时项目中，尤其是公司官网设计的时候，很多时候会遇到这种平行四边形的按钮效果，效果如下：
如何实现平行四边形效果的按钮呢？
我们可能会这样想，矩形其实是平行四边形的超集，所以只需要把矩形斜向拉伸一下不久可以啦。
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
background: green;
transform: skewX(-45deg);
复制代码呀，怎么里面的内容也被拉伸了，怎么解决呢？最直接的方法内容部分再嵌套一层div，然后再单独设置内容的拉伸角度, 但是，如果还是只有这一个div呢？如何用css去解决这一问题呢？ 代码如下：
div{position: relative;width: 200px;height: 100px;text-align: center;line-height: 100px;
}
div::before {content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: -1;background: green;transform: skewX(-45deg);
}
复制代码这是一个小技巧： 利用伪元素以及定位属性，将伪元素设置成一个方块（其实相当于还是嵌套的一个元素），并且对方块进行变形，且设置z-index:-1，将该伪元素作为一个背景块，放在内容下面。当我们想要某个元素变形，并且不希望该元素里面的内容变形的时候，都可以采用该方法。
三：菱形图片
- 首先，我们很容易想到，把一个正方形，使用transform:rotate() 旋转一下即可。
width: 100px;
height: 100px;
background: green;
transform: rotate(-45deg);
复制代码但是这种方案其实有个问题：我们设置的宽高分别为100px, 但是旋转以后，元素所占的空间就需要扩大，否则会出现如下情况
所以采用这种方案，需要我们手动去控制菱形所占的区域，即对角线的长宽。
- 接下来，我们采用另外一种方案，clip-path， 类似于svg中的path，我们可以指定一系列的坐标点，然后连起来，形成我们任意想要的图形。 代码如下：
width: 200px;
height: 100px;
background: green;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
复制代码效果如下：
总结：这里，我们采用clip-path绘制了四个点，效果是菱形，同样，我们可以去绘制三个点的三角形，还有五边形，六边形等等各种图形，只要你确定好各个点的位置即可。同时要注意的是，clip-path目前的兼容性可能还没有支持的很好。
四：简单的饼图
首先，看一下最简单的圆形效果：
代码如下：
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
复制代码然后，我们看一下接下来的效果：两半圆
我们来分析一下两半圆的实现方案：
- 通过添加两个元素，设置左边圆和右边圆，然后拼接在一起, 或者为了只使用一个元素，可以同时使用before和after分别设置左半圆和右半圆
div {width: 100px;height: 100px;border-radius: 50%;position: relative;
}
div::before {content: '';display: inline-block;width: 50%;height: 100%;border-radius: 200% 0 0 200% / 100% 0 0 100%;background: green;position: absolute;left: 0px
}
div::after {content: '';display: inline-block;width: 50%;height: 100%;border-radius: 0 200% 200% 0 / 0 100% 100% 0;background: red;position: absolute;right: 0px
}复制代码- 通过linear-gradient渐变实现。
width: 100px;
height: 100px;
border-radius: 50%;
background-image: linear-gradient(to right, green 50%, red 0);
复制代码3.通过linear-gradient结合背景颜色实现。
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
background-image: linear-gradient(to right, transparent 50%, red 0);
复制代码接下来，我们再近一步，看一下如下效果：
首先，我们来分析一下，相对于我们之前两个半圆的效果，只要在此基础上，再加一个半圆，并且背景颜色设置为green， 然后覆盖在当前两半圆上，同时控制旋转的角度，这样不就得到了,
div {width: 100px;height: 100px;border-radius: 50%;background: green;background-image: linear-gradient(to right, transparent 50%, red 0);
}
div::before {content: '';display: inline-block;width: 50%;height: 100px;border-radius: 0 100% 100% 0 / 50% 50%;margin-left: 50%;background-color: inherit;transform: rotate(45deg);transform-origin: 0 50%;
}
复制代码来来来，再近一步，从上面的代码，我们可以看到旋转的角度被写死为45deg, 如果可以动态的控制旋转的角度，不就可以得到类似进度条的效果了。效果如下:
所以，接下来，最关键的是如何动态控制旋转角度？简单啊，animation不就可以啦。
代码如下：
div {width: 100px;height: 100px;border-radius: 50%;background: green;background-image: linear-gradient(to right, transparent 50%, red 0);
}
div::before {content: '';display: inline-block;width: 50%;height: 100px;border-radius: 0 100% 100% 0 / 50% 50%;margin-left: 50%;background-color: inherit;transform-origin: 0 50%;animation: spin 3s linear infinite, bg 6s step-end infinite;
}
@keyframes spin {to {transform: rotate(.5turn);}
}
@keyframes bg {50% {background: red;}
}
复制代码五：三角形
首先，我们来看一下有边框的正方形：
width: 100px;
height: 100px;
border: 30px solid green;
复制代码然后，我们设置不同的边框颜色
代码如下：
width: 100px;
height: 100px;
border: 30px solid green;
border-color: green blue yellow red;
复制代码这个时候，我们是不是发现了一些惊喜呀，边框交界处，都是斜线，这个时候，我们很自然的联想到我们的三角形，这个时候，我们只要把宽高设置小一点，是不是就得到我们想要的三角形了呢。
啦啦啦，这个时候，惊喜就真的出现了，最后一个正方向就是右四个三角形组成的，
代码如下：
width: 0px;
height: 0px;
border: 30px solid green;
border-color: green blue yellow red;
复制代码再近一步，我们这个时候把其中三个边框的颜色设置为白色或者透明，不就得到三角形了嘛，
代码如下：
width: 0px;
height: 0px;
border: 30px solid green;
border-color: green transparent transparent transparent;
复制代码效果如下：
六：总结
本节，我们实现了常见的一些椭圆，半圆，四分之一圆等效果，实现原理就是border-radius的使用，可以分别指定四个角在水平方向和垂直方向不同的半径值，同时，我们还知道了clip-path属性的使用，可以通过该属性绘制节点，然后连线，这样就可以实现任何我们想要的形状。
