CSS圖片遮罩多邊形越來(lái)越受到網(wǎng)頁(yè)設(shè)計(jì)師的關(guān)注和喜愛，在視覺效果上為網(wǎng)站添加了獨(dú)特的個(gè)性和美感。下面我們將通過pre標(biāo)簽來(lái)了解使用CSS實(shí)現(xiàn)圖片遮罩多邊形的代碼。

//HTML代碼
<div class="mask">
<img src="image.jpg">
<span class="triangle"></span>
</div>
//CSS代碼
.mask {
position: relative;
overflow: hidden;
width: 300px;
height: 200px;
}
.mask img {
width: 100%;
height: 100%;
display: block;
transition: transform .5s;
}
.mask .triangle {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 20px solid #fff;
}
.mask:hover img {
transform: scale(1.2);
}
.mask:hover .triangle {
border-right-color: #000;
}

在上述代碼中，首先創(chuàng)建一個(gè)div來(lái)包含圖片和遮罩。通過設(shè)置相對(duì)定位和overflow屬性為hidden，將遮罩限定在div的范圍內(nèi)。接下來(lái)設(shè)置圖片的寬度和高度為100%，讓圖片填充整個(gè)div，且實(shí)現(xiàn)了鼠標(biāo)放上去圖片放大的效果。然后定義遮罩，以三角形為例，通過絕對(duì)定位和邊框的設(shè)置，創(chuàng)建出一個(gè)三角形形狀的遮罩。最后利用:hover選擇器，實(shí)現(xiàn)鼠標(biāo)放上去遮罩顏色改變的效果。

CSS圖片遮罩多邊形實(shí)現(xiàn)并不難，但在實(shí)踐中需要靈活運(yùn)用，結(jié)合整體設(shè)計(jì)風(fēng)格。希望以上代碼能夠?yàn)槟峁椭?/p>