css形状实践：自适应椭圆、平行四边形、菱形图片

2018-12-2609:55:39网页制作Comments3,714 views字数 5225阅读模式

以下内容，我们假设结构层的变更是不允许的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

我们也尽量不去添加额外的HTML,以做到样式层与结构层的分离，如若实在没有其他的可能性，才退而求其次来增加额外的HTML。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

自适应椭圆

制作一个自适应的椭圆是形状篇中最简单的图形了，简直不能再简单了。众所周知，制作与圆相关的图形，用到的属性就要 border-radius 了。我们知道，border-radius可以单独指定水平和垂直半径，使用斜杠 (/) 来分开，两个值相等可以制作一个圆弧，如果不相等，便是一个椭圆弧了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

.demo{
    border-radius: 100px / 75px;
}
复制代码

其实border-radius是一个简写属性，我们有两种方式可以为元素的每个角指定不同的值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

第一种简写方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

.demo{
   border-radius:10px 20px 30px 40px / 50px 60px 70px 80px;
   /* 斜杠（/）前代表水平半径，后代表垂直半径，顺序分别为左上角开始，顺时针走向，所以这段代码表示左上角(10px/50px) 右上角（20px/60px）右下角（30px/70px）左下角（40px/80px） */
}
复制代码

第二种是分开写的方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

.demo{
    border-top-left-radius:10px/50px;
    border-top-right-radius:20px/60px;
    border-bottom-right-radius:30px/70px;
    border-bottom-left-radius:40px/80px;
}
复制代码

如果生成一个自适应的椭圆就很简单了，只要每个角的水平半径为宽的50%，垂直半径为高的50%，就ok了。代码简写为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

.ellipse{
    border-radius:50%;
}
复制代码

平行四边形

平行四边形也是页面中常出现的一种图形，我们可能很容易就想到，使用skew()将矩形倾斜一定角度即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

.parallelograms{
    transform: skew(-45deg);
    /*...... */
}
复制代码

可惜效果不如人意，文字也跟着倾斜了，这时候很容易想到，借助一层dom结构，再把内部文字倾斜回来。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

<div class="parallelograms">
    <div>二十首情诗与绝望的歌</div>
</div>
复制代码

 .parallelograms{
    margin: 50px auto;
    max-width: 200px;
    padding: 10px;
    line-height: 30px;
    text-align: center;
    color:#fff;
    background-color: #58a;
    transform:skew(-45deg);
}
.parallelograms div{
    transform: skew(45deg);
}
复制代码

很好，效果不错，但是却添加额外的 HTML 元素。我们不做过多讨论。接下来我们讨论第二种方式，使用 伪元素来实现，这时候就体现了伪元素的好处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

思路：我们可以把伪元素作为第一种方法中的辅助结构层，把所有样式(背景、边框等)应用到伪元素上，然后再对伪元素进行变形，得到我们的平行四边形形状，而正式内容不受影响，然后把伪元素定位z-index设为-1，便可漏出正文的内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html


 .parallelograms{
    margin: 50px auto;
    max-width: 200px;
    padding: 10px;
    line-height: 30px;
    text-align: center;
    color:#fff;
    position: relative;
}
.parallelograms:before{
    content:'';
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background-color: #58a;
    transform:skew(-45deg);
    z-index: -1;
}
复制代码

提醒：这个技巧不仅对 skew() 变形来说很有用，还适用于其他任何变形样式，当我们想变形一个元素而不想变形它的内容时就可以用到它。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

菱形图片

看到这个图形状，是不是马上想起上一小节平行四边形的制作，一样的道理，需要把图片用一个文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

包裹起来，然后对其应用相反的 rotate() 变形样式:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

<div class="diamond">
    <img src="https://avatars1.githubusercontent.com/u/8121621?v=4" alt="..." />
</div>
复制代码

.diamond {
    margin:30px auto;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    overflow: hidden;
    border: 1px solid red; /*为了更好的展示问题*/
}

.diamond img {
    max-width: 100%;
    transform: rotate(-45deg);
}

复制代码

奈何，天不遂人愿！问题在于 max-width:100% 中的100%是指width的100%，也就是400px，而正方形旋转后最长边为对角线，是根号2倍的width，自然图片的宽度不够了，我们可以使用 scale() 变形样式来把这个图片放大。找到问题后，我们修复它，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

.diamond {
    margin:30px auto;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    overflow: hidden;
    border: 1px solid red; /*为了更好的展示问题*/
}

.diamond img {
    max-width: 100%;
    transform: rotate(-45deg) scale(1.42);
}
复制代码

这个方法需要一层额外的 HTML 标签，这是我们不做优先考虑的。同时有一个最大的问题就是，只能处理正方形图片，否则就会失效。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

在上节中我们使用过伪元素的技巧，同样可以用在这里，代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

 .diamond{
    margin:30px auto;
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
    transform: rotate(45deg);
}
.diamond:before{
    content:'';
    position: absolute;
    left: 0;
    right:0;
    top:0;
    bottom:0;
    transform: rotate(-45deg) scale(1.42);
    background: url(https://avatars1.githubusercontent.com/u/8121621?v=4);
    background-size: cover;
}
复制代码

原理与上面借助结构层是一样的，所以面临同样的问题，只能处理正方形图片。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

接下来我们使用一种更为好用的方法来解决不是正方形的图片。（裁切路径方案）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

抛出代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

.diamond{
    /*......*/
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
复制代码

clip-path 属性是从svg中借鉴过来的，裁切路径允许我们把元素裁剪为我们想要的任何形状。polygon()函数允许我们用一系列(以逗号分隔的)坐标点来指定任意的多边形。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

该方法同样可以实现上个章节中的平行四边形，以下章节中的切角、梯形等等任意形状，只需要按顺序排列坐标点即可，以下章节不再做过多展示，自己可以多多尝试。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

切角效果

切角效果，很容易想到的就是我的上篇文章你该知道的《css揭秘》--背景与边框篇中的条纹背景制作中用到的线性渐变 linear-gradient()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

我们很轻易的可以实现一个角被切掉的效果，代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

.bevel-corners{
    background: #58a; /*linear-gradient不支持的情况下，作为代码回退机制*/ 
    background:linear-gradient(-45deg, transparent 15px, #58a 0);
}
复制代码

接下来使用两层渐变背景实现两个角被切掉。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

首先分析一下，默认情况下，这两层渐变都会填满整个元素，因此它们会相互覆盖。需要让它们都缩小一些，于是我们使用 background-size 让每层渐变分别只占据整个元素一半的面积，并且background-repeat设为no-repeat。代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

.bevel-corners{
    background: #58a;
    background:
    linear-gradient(-45deg, transparent 15px, #58a 0) right,
    linear-gradient(45deg, transparent 15px, #58a 0) left;
    background-size:50% 100%;
    background-repeat:no-repeat;
}
复制代码

同样的原理，我们把每层渐变改为整个元素的四分之一，则四层渐变色，可以实现四个角被切掉。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

.bevel-corners{
    background:#58a;
    background:
    linear-gradient(-45deg,transparent 15px, #58a 0) bottom right,
    linear-gradient(45deg,transparent 15px, #58a 0) bottom left,
    linear-gradient(135deg,transparent 15px, #58a 0) top left,
    linear-gradient(-135deg,transparent 15px, #58a 0) top right;
    background-size:50% 50%;
    background-repeat:no-repeat;
}
复制代码

继续增加难度，实现 弧形切角，原理都一样，换汤不换药，只需将线性渐变改为径向渐变即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

实现代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

.scoop-corners{
    background: #58a; 
    background:
    radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
    radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
    radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
    radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
    background-size: 50% 50%; 
    background-repeat: no-repeat;
}
复制代码

简单的饼图

实现最后一个图形--饼图（绿色为饼图，棕色来显示比率）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

基于 transform 的解决方案文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

思路：把圆形的左右两部分指定为上述两种颜色，然后用伪元素覆盖上去，通过旋转来决定露出多大的扇区。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

20%的饼图代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

.pie {
    width: 100px; 
    height: 100px;
    border-radius: 50%; 
    background: yellowgreen;
    background-image:linear-gradient(90deg, transparent 50%, #655 0);
}
.pie:before { 
    content: '';
    display: block; 
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%; 
    background-color: inherit; 
    transform-origin: left;
    transform: rotate(.2turn);
}
复制代码

当旋转超过50%之后，饼图就变成了下图这样，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

然后我们可以让旋转的伪元素的颜色反一下，变成棕色既可以实现50%-100%比率的饼图，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

60%的饼图代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9069.html

.pie:before { 
    content: '';
    display: block; 
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%; 
    background-color: #655; 
    transform-origin: left;
    transform: rotate(.1turn);
}