css揭秘实战技巧 - 形状 [二]

全目录

本系列文章，主要是围绕css3属性，实现咱们常见的各类效果，这些效果都是咱们实战开发中常常能够用到的效果：

1. css揭秘实战技巧- 背景与边框 [一]
2. css揭秘实战技巧- 形状 [二]
3. css揭秘实战技巧 - 视觉效果[三]
4. css揭秘实战技巧 - 字体排印[四]
5. css揭秘实战技巧 - 用户体验[五]
6. css揭秘实战技巧 - 结构与布局[六]
7. css揭秘实战技巧 - 过渡与动画[七]

前言

本节课要将的内容：

1. 自适应椭圆
2. 平行四边形
3. 菱形图片
4. 简单的饼图
5. 三角形
6. 总结

一：自适应椭圆

1. 正方形

代码以下：

width: 100px;
height: 100px;
background: greeen;
复制代码

接下来，咱们经过设置border-radius来改变一下正方形的形状：

2. 圆形

width: 100px;
height: 100px;
background: greeen;
//border-radius: 50px;
//border-radius: 50px 50px;
//border-radius: 50%;
//border-radius: 100px;

以上四种写法均可以实现圆形的效果，也就是说：border-radius的值能够是具体值，也能够是百分比(为了代码的可拓展性，最好用百分比)，同时，只要值大于正方形的长度的一半（例如：此处是50px），结果必定是圆形.
复制代码

3. 单独设置四个角半径的的圆

实现代码以下：

width: 100px;
height: 100px;
border-radius: 50px 40px; //等价于50px 40px 50px 40px；方向依次是从左上角开始顺时针旋转！
background: green;
复制代码

4. 单独设置水平方向和垂直方向的圆

代码以下：

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;
复制代码

注意：从椭圆，到半椭圆，再到四分之一椭圆，咱们要理解border-radius是怎么设置的，这就和border-radius的值的写法有关了：border-radius: 50% 50% 50% 50% / 50% 50&% 50% 50%；其余简写均可以转换成前面的写法，方向是从左上角开始顺时针旋转，/ 前面是水平方向的半径，后面是垂直方向的半径。

二：平行四边形

咱们平时项目中，尤为是公司官网设计的时候，不少时候会遇到这种平行四边形的按钮效果，效果以下：

如何实现平行四边形效果的按钮呢？

咱们可能会这样想，矩形实际上是平行四边形的超集，因此只须要把矩形斜向拉伸一下不久能够啦。

而后，咱们使用transform: skewX(45deg)拉伸如下，代码以下：

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，将该伪元素做为一个背景块，放在内容下面。当咱们想要某个元素变形，而且不但愿该元素里面的内容变形的时候，均可以采用该方法。

三：菱形图片

1. 首先，咱们很容易想到，把一个正方形，使用transform:rotate() 旋转一下便可。

   

   代码以下：

width: 100px;
height: 100px;
background: green;
transform: rotate(-45deg);
复制代码

可是这种方案其实有个问题：咱们设置的宽高分别为100px, 可是旋转之后，元素所占的空间就须要扩大，不然会出现以下状况

因此采用这种方案，须要咱们手动去控制菱形所占的区域，即对角线的长宽。

2. 接下来，咱们采用另一种方案，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;
复制代码

而后，咱们看一下接下来的效果：两半圆

咱们来分析一下两半圆的实现方案：

1. 经过添加两个元素，设置左边圆和右边圆，而后拼接在一块儿, 或者为了只使用一个元素，能够同时使用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
}

复制代码

2. 经过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，而且宽高都设置为0，利用边框交界处的斜线，就能够获得四个三角形构成的正方形或者长方形，而后再设置其中三个边框的颜色为透明，就能够获得咱们想要的三角形了（其实仍是一个正方形，只不过其中三个三角形的颜色是透明的）

六：总结

本节，咱们实现了常见的一些椭圆，半圆，四分之一圆等效果，实现原理就是border-radius的使用，能够分别指定四个角在水平方向和垂直方向不一样的半径值，同时，咱们还知道了clip-path属性的使用，能够经过该属性绘制节点，而后连线，这样就能够实现任何咱们想要的形状。