你该知道的《css揭秘》--形状篇

变形样式:

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

接下来使用两层渐变背景实现两个角被切掉。

。

代码如下：

.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);
}

复制代码