css實現平行四邊形、菱形圖片效果

1、平行四邊形

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，這樣他的堆疊層次就會被推到宿主元素以後。

效果圖：

 

 2、菱形圖片

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

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

效果圖