有時候我們想要在網頁上展示不規則形狀的圖片，而傳統的矩形切換并不能很好地呈現這種效果，這時候我們可以使用CSS來實現不規則圖片的切換。

/* CSS代碼片段 */  
.irregular-image{
width: 300px;
height: 300px;
background-image: url(圖片路徑);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
transition: clip-path 0.5s;
-webkit-transition: clip-path 0.5s;
}
.irregular-image:hover{
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

上述代碼中，我們使用clip-path屬性來裁剪圖片，通過設定polygon參數來指定不規則形狀的位置，然后通過hover偽類來改變裁剪位置，從而實現圖片的切換效果。

需要注意的是，clip-path屬性目前只有Chrome和Firefox等現代瀏覽器支持，如果想要讓低版本瀏覽器也能正常瀏覽，我們可以使用svg作為背景圖，使用polygon標簽來進行裁剪。

/* CSS代碼片段 */  
.irregular-image{
width: 300px;
height: 300px;
background-image: url(圖片路徑);
background-size: 100% 100%;
mask: url(裁剪路徑);
}
.irregular-image:hover{
mask: none;
}

上述代碼中，我們使用mask屬性來進行裁剪，通過url指定svg圖，并且通過background-size屬性指定背景圖大小，在hover偽類中將mask設為none來還原原始形狀。

總的來說，使用CSS來實現不規則圖片切換效果非常簡單，只需要使用clip-path或者svg的mask屬性即可，但需要注意瀏覽器的兼容性問題。