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

如此簡單的代碼就實現了菱形，我們甚至實現了在鼠標懸停的時候平滑的擴展為完整的面積。

效果圖