一、平行四邊形
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%); }
如此簡單的代碼就實現了菱形,我們甚至實現了在鼠標懸停的時候平滑的擴展為完整的面積。
效果圖