css实现平行四边形、菱形图片效果

一、平行四边形

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

如此简单的代码就实现了菱形，我们甚至实现了在鼠标悬停的时候平滑的扩展为完整的面积。

效果图