CSS3非矩形圖片是現代網頁設計中最新的趨勢之一。它們是基于CSS3的新特性，可以讓我們創建不同形狀的圖片，不再局限于傳統的矩形或圓形。

創建非矩形圖片的方式有很多種，其中一種是使用CSS3的clip-path屬性。該屬性可以用于定義一個剪切路徑，它基于SVG的路徑語法，可以讓我們創建復雜的路徑。

.image {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

上述代碼定義了一個四邊形圖片，它的左上角是50% 0%的點，右上角是100% 50%的點，以此類推。我們也可以使用百分比以外的單位，如像素。

.image {
clip-path: polygon(50px 0, 100px 50px, 50px 100px, 0 50px);
}

除了使用剪切路徑，我們還可以使用CSS3的mask屬性。mask屬性可以讓我們創建一個遮罩層，它可以看作是一個透明的DIV。

.image {
-webkit-mask-image: url(non-rectangular-image.png);
mask-image: url(non-rectangular-image.png);
}

上述代碼中，我們使用一個圖片作為遮罩層，它不是矩形的。該圖片可以是任何形狀，只要它與我們要遮罩的圖片的尺寸相同即可。

在創建非矩形圖片時，我們還需要考慮到兼容性的問題。某些瀏覽器可能不支持一些CSS3屬性，導致我們無法實現所需的效果。因此，在使用非矩形圖片時，我們需要仔細考慮瀏覽器的兼容性，并根據需要提供備用方案。

總體來說，CSS3非矩形圖片是一個很有趣的特性。它為網頁設計師提供了更多的創意空間，讓我們能夠輕松實現更多復雜的設計效果。