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

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

效果圖

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM