CSS遮罩是一種強大的技術，可以讓網頁設計師完成各種酷炫的效果。其中，對角線遮罩是一種常見的設計，它可以非常好地突出一個元素，讓網頁更加美觀。下面，我們來看一下如何使用CSS實現對角線遮罩。

/* 定義一個元素，添加背景圖 */ 
.element {
background-image: url(image.jpg);
position: relative;
}
/* 添加一個偽元素，作為遮罩 */ 
.element:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 遮罩顏色 */
transform-origin: bottom right; /* 旋轉的基準點 */ 
transform: rotate(-45deg); /* 旋轉45度 */ 
}

以上代碼中，我們首先定義了一個元素，并且為它添加了一張背景圖。接著，我們通過:before偽元素來實現遮罩效果。我們將這個元素定位到左上角，讓它的寬高與父元素一致，同時設置一個半透明的背景色，作為遮罩的顏色。

最后，我們用transform屬性給這個偽元素旋轉了45度，讓它呈對角線的形狀。transform-origin屬性則是指定了旋轉的基準點，這里我們設置為右下角。

通過這些代碼，我們就能實現一個簡單的對角線遮罩效果。如果要做更多的定制化，可以改變顏色、旋轉角度、旋轉基準點等?？傊?，CSS遮罩是一個非常實用的技術，能夠輕松實現各種驚艷的效果。