摘要：
}.按钮>；html<；相对的白色位置所容纳之物左边正确的css.picture｛margin；img｛width；transform；overflow；img{max width；transform；divclass=“parent”>；css.parent｛widt；｝img｛width=；transition；
一、平行四边形
1. 使用两个元素实现
html
<a class="button"> <div>click me</div> </a>
css
.button{ margin: 50px; display: inline-block; background: #404ED3; transform: skewX(-45deg); } .button>div{ padding: 15px; color: white; font-size: 24px; transform: skewX(45deg); }
效果图
原理：
将容器和内容区域做相反方向的变形，就可以使外面的容器变形，同时不会影响内部的元素。
2. 使用伪元素实现
我们可以把所有样式都应用到伪元素上，然后再对伪元素进行变形。因为我们的内容并不是包含在伪元素中，所以内容并不会受到伪元素的影响。同时，我们希望伪元素保持良好的灵活性，可以自动继承宿主元素的尺寸，甚至当宿主尺寸是由其内容来决定时仍然如此。一个简单的办法就是给宿主元素应用position：relative，并且为其伪元素设置position：absolute，然后再把所有偏移量设置为0，以便让他在水平方向和垂直方向都和宿主尺寸相同。
html
<a class="button">click me</a>
css
.button{ position: relative; display: inline-block; margin: 50px; padding: 15px; color: white; font-size: 24px; } .button::before{ background: #404ED3; z-index: -1; position: absolute; content: ''; top: 0;left: 0;right: 0;bottom: 0; transform: skewX(-45deg); }
值得注意的是：用伪元素生成的方框是重叠在内容上面的，一旦给他设置背景就会遮住内容，为了解决这个问题，我们给伪元素设置了z-index：-1，这样他的堆叠层次就会被推到宿主元素之后。
效果图：
二、菱形图片
1. 使用两个元素实现
思路：我们可以将父元素旋转45deg，然后将里面的图片在向相反方向旋转45deg,并且设置父元素的overflow:hidden，子元素的最大宽度为100%。
html
<div class="picture"> <img src="cat.jpg" alt=""> </div>
css
.picture{ margin: 100px; width: 300px; transform: rotate(45deg); overflow: hidden; } .picture>img{ width: 300px;/*100%*/ transform: rotate(-45deg); }
效果图
虽然这个八边形看起来也很好看，不过这不是我们想要的，原因在于图片的宽度应该为父元素（正方形）宽度的对角线长度，所以我们可以调整一下
css
.picture{ margin: 100px; width: 300px; transform: rotate(45deg); overflow: hidden; } .picture>img{ max-width: 100%; transform: rotate(-45deg) scale(1.42); }
效果图
2. 使用clip-path实现
hml
<div class="parent"> <img src="cat1.jpg" alt=""> </div>
css
.parent{ width: 300px; } img{ width: 100%; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); transition: 1s clip-path; } img:hover{ clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
如此简单的代码就实现了菱形，我们甚至实现了在鼠标悬停的时候平滑的扩展为完整的面积。
效果图
