通過css裁切圖片為菱形圖片

來源:互聯網
上載者:User

在web設計中,把圖片裁切成菱形圖片展示是一種常見的需求,通過photoshop直接將一張圖片裁剪成菱形是一種解決方案,但不是最佳解決方案,這裡筆者直接通過css設計了兩種方案,來實現讓圖片菱形展示。
以以下圖片為例:

我們想要這張圖片以菱形的效果展示,這裡是不能讓圖片直接通過rotate來旋轉實現的,直接讓圖片旋轉,那圖片的內容也就傾斜了。我們想要的效果圖是這樣的:

這裡介紹兩種方法。
第一種:

<div class="picture">    <img src="img/img.jpg"/></div>
.picture{    width: 100px;    transform:rotate(45deg);    overflow: hidden;}.picture>img{    max-width: 100%;    transform: rotate(-45deg) scale(1.42);}

這裡用到了兩個標籤,注意內層圖片反向旋轉之後要通過scale進行放大處理,否則會出現八邊形的樣子。
第二種:
這種方法更加直觀有效,而且效果表現更佳。
還是以上面標籤中的圖片為例,這裡只操作img標籤,也僅僅只需要這一個標籤就可以,通過對這個img標籤添加以下樣式就可以實現:

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

只需要添加這一個樣式就可以實現和第一種方案同樣的效果,而且採取這種方案,也可以完美的處理非正方形圖片,使其成為菱形圖片展示,第一種方案在非正方形圖片的處理上是有問題的。
這裡再增加一個小技巧,通過clip-path屬性,再配合動畫,可以實現由菱形圖片複原的效果,代碼如下:

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

滑鼠移至上方到圖片上時,圖片會平滑的擴充為完整的圖片,讀者可以親手嘗試一下。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.