css形状实践：自适应椭圆、平行四边形、菱形图片
以下内容，我们假设结构层的变更是不允许的。
我们也尽量不去添加额外的HTML,以做到样式层与结构层的分离，如若实在没有其他的可能性，才退而求其次来增加额外的HTML。
自适应椭圆
制作一个自适应的椭圆是形状篇中最简单的图形了，简直不能再简单了。众所周知，制作与圆相关的图形，用到的属性就要 border-radius 了。我们知道，border-radius可以单独指定水平和垂直半径，使用斜杠 (/) 来分开，两个值相等可以制作一个圆弧，如果不相等，便是一个椭圆弧了。
.demo{
border-radius: 100px / 75px;
}
复制代码其实border-radius是一个简写属性，我们有两种方式可以为元素的每个角指定不同的值。
第一种简写方式
.demo{
border-radius:10px 20px 30px 40px / 50px 60px 70px 80px;
/* 斜杠（/）前代表水平半径，后代表垂直半径，顺序分别为左上角开始，顺时针走向，所以这段代码表示左上角(10px/50px) 右上角（20px/60px）右下角（30px/70px）左下角（40px/80px） */
}
复制代码第二种是分开写的方式
.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了。 代码简写为：
.ellipse{
border-radius:50%;
}
复制代码平行四边形
平行四边形也是页面中常出现的一种图形，我们可能很容易就想到，使用skew()将矩形倾斜一定角度即可。
.parallelograms{
transform: skew(-45deg);
/*...... */
}
复制代码可惜效果不如人意，文字也跟着倾斜了，这时候很容易想到，借助一层dom结构，再把内部文字倾斜回来。
<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 元素。我们不做过多讨论。接下来我们讨论第二种方式，使用 伪元素来实现，这时候就体现了伪元素的好处。
思路：我们可以把伪元素作为第一种方法中的辅助结构层，把所有样式(背景、边框等)应用到伪元素上，然后再对伪元素进行变形，得到我们的平行四边形形状，而正式内容不受影响，然后把伪元素定位z-index设为-1，便可漏出正文的内容。
.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() 变形来说很有用，还适用于其他任何变形样式， 当我们想变形一个元素而不想变形它的内容时就可以用到它。
菱形图片
看到这个图形状，是不是马上想起上一小节平行四边形的制作，一样的道理，需要把图片用一个
包裹起来，然后对其应用相反的 rotate() 变形样式:
<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() 变形样式来把这个图片放大。找到问题后，我们修复它，
代码如下：
.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 标签，这是我们不做优先考虑的。同时有一个最大的问题就是，只能处理正方形图片，否则就会失效。
在上节中我们使用过伪元素的技巧，同样可以用在这里，代码如下：
.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;
}
复制代码原理与上面借助结构层是一样的，所以面临同样的问题，只能处理正方形图片。
接下来我们使用一种更为好用的方法来解决不是正方形的图片。（裁切路径方案）
抛出代码：
.diamond{
/*......*/
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
复制代码clip-path 属性是从svg中借鉴过来的，裁切路径允许我们把元素裁剪为我们想要的任何形状。polygon()函数允许我们用一系列(以逗号分隔的)坐标点来指定任意的多边形。
该方法同样可以实现上个章节中的平行四边形，以下章节中的切角、梯形等等任意形状，只需要按顺序排列坐标点即可，以下章节不再做过多展示，自己可以多多尝试。
切角效果
切角效果，很容易想到的就是我的上篇文章 你该知道的《css揭秘》--背景与边框篇 中的条纹背景制作中用到的线性渐变 linear-gradient()
我们很轻易的可以实现一个角被切掉的效果，代码如下：
.bevel-corners{
background: #58a; /*linear-gradient不支持的情况下，作为代码回退机制*/
background:linear-gradient(-45deg, transparent 15px, #58a 0);
}
复制代码接下来使用两层渐变背景实现两个角被切掉。
首先分析一下，默认情况下， 这两层渐变都会填满整个元素，因此它们会相互覆盖。需要让它们都缩小一些，于是我们使用 background-size 让每层渐变分别只占据整个元素一半的面积，并且background-repeat设为no-repeat。代码如下：
.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;
}
复制代码同样的原理，我们把每层渐变改为整个元素的四分之一，则四层渐变色，可以实现四个角被切掉。
代码如下：
.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;
}
复制代码继续增加难度，实现 弧形切角， 原理都一样，换汤不换药，只需将线性渐变改为径向渐变即可。
实现代码如下：
.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;
}
复制代码简单的饼图
实现最后一个图形--饼图（绿色为饼图，棕色来显示比率）
基于 transform 的解决方案
思路：把圆形的左右两部分指定为上述两种颜色，然后用伪元素覆盖上去，通过旋转来 决定露出多大的扇区。
20%的饼图代码如下：
.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%之后，饼图就变成了下图这样，
然后我们可以让旋转的伪元素的颜色反一下，变成棕色既可以实现50%-100%比率的饼图，
60%的饼图代码如下：
.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);
}
作者：victor318x
