鑽石形的圖片是常見的一種視覺設計，但是用 CSS 不容易做到。事實上，一直到最近，它還是不可能實現的效果。以前網頁設計師要實現鑽石形圖片，必須從原始圖片下手，先用 Photoshop 裁切後再引入網頁，如此就需要另外開一個軟體，設計需求變更的話，圖片和 CSS 樣式更新的過程也是個冗長乏味的過程。

新的 CSS 標準應該有更好的做法吧？好消息是，你現在有二個！

transform 方法

<div class="picture">
  <img src="http://drive.google.com/uc?export=view&id=1xrxrTXf4REmOgRTRLj_sWEa0xB1rfC_A" />
</div>

(我們的範例圖片)

這一個方法用了前面平行四邊形相同的手法，在<img>外層包一個<div>，用這個外層容器當做裁切的邊界，二個元素使用rotate()相反方向。

這樣一來應該大功告成了吧？沒想到我們竟然得到一個八角形的圖案！

.picture {
  width: 400px;
  transform: rotate(45deg);
  overflow: hidden;
}

.picture > img {
  max-width: 100%;
  transform: rotate(-45deg);
}

到底出了什麼問題呢？原因出在max-width: 100%，這裡的100%代表父層的寬度，但是現在的清況我們卻是要<img>「和父層的對角線等寬，而不是和兩邊等寬」。要得到這個值，我們又要求助於畢氏定理。

以父層正方形容器單邊長100%代入公式，得到斜邊也就是對角線長約142%，因此只要將<img>放大1.42倍應該就可以得到我們要的結果。

.picture {
  width: 400px;
  transform: rotate(45deg);
  overflow: hidden;
}

.picture > img {
  max-width: 100%;
  transform: rotate(-45deg) scale(1.42);
}

Clipping path 方法

前面的方法我們還是用到了二個元素，而且它只適用在正方形，如果是長方形此法就不管用了！

另一個更好的方法是用clip-path，不過要注意它的瀏覽器支援性。在這裡我們使用的是polygon()來做一個鑽石形狀。

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

就是只有一行設定這麼簡單！不需要二個元素，也不需要好幾行的 CSS，產生的結果和第一種方法一模一樣。

CodePen