一、平行四邊形

1. 使用兩個(gè)元素實(shí)現(xiàn)

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

效果圖

原理：

將容器和內(nèi)容區(qū)域做相反方向的變形，就可以使外面的容器變形，同時(shí)不會(huì)影響內(nèi)部的元素。

2. 使用偽元素實(shí)現(xiàn)

我們可以把所有樣式都應(yīng)用到偽元素上，然后再對(duì)偽元素進(jìn)行變形。因?yàn)槲覀兊膬?nèi)容并不是包含在偽元素中，所以內(nèi)容并不會(huì)受到偽元素的影響。同時(shí)，我們希望偽元素保持良好的靈活性，可以自動(dòng)繼承宿主元素的尺寸，甚至當(dāng)宿主尺寸是由其內(nèi)容來(lái)決定時(shí)仍然如此。一個(gè)簡(jiǎn)單的辦法就是給宿主元素應(yīng)用position：relative，并且為其偽元素設(shè)置position：absolute，然后再把所有偏移量設(shè)置為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);
}

值得注意的是：用偽元素生成的方框是重疊在內(nèi)容上面的，一旦給他設(shè)置背景就會(huì)遮住內(nèi)容，為了解決這個(gè)問(wèn)題，我們給偽元素設(shè)置了z-index：-1，這樣他的堆疊層次就會(huì)被推到宿主元素之后。

效果圖：

二、菱形圖片

1. 使用兩個(gè)元素實(shí)現(xiàn)

思路：我們可以將父元素旋轉(zhuǎn)45deg，然后將里面的圖片在向相反方向旋轉(zhuǎn)45deg,并且設(shè)置父元素的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);
}

效果圖

雖然這個(gè)八邊形看起來(lái)也很好看，不過(guò)這不是我們想要的，原因在于圖片的寬度應(yīng)該為父元素（正方形）寬度的對(duì)角線長(zhǎng)度，所以我們可以調(diào)整一下

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實(shí)現(xiàn)

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

如此簡(jiǎn)單的代碼就實(shí)現(xiàn)了菱形，我們甚至實(shí)現(xiàn)了在鼠標(biāo)懸停的時(shí)候平滑的擴(kuò)展為完整的面積。

效果圖

總結(jié)

以上是生活随笔為你收集整理的css实现平行四边形、菱形图片效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。