寫過 HTML upvote arrow（向上箭頭），speech bubble（對話氣泡）或其他類似的尖角元素的人都知道，為了建立一個純 CSS 實現的三角形，必須使用某些 Hack。最流行的兩種方式是通過 邊框實現，或 Unicode 字元。
不得不說，這些 CSS Hack 都非常聰明，但它們卻算不上好的解決方案，程式碼不優雅且不夠靈活。例如，我們無法在三角形上使用背景圖片，因為邊框和字元只能使用顏色。
譯註： speech bubble（對話氣泡）如下圖：
使用 Clip-path
Clip-path 是 CSS 規範中新屬性中的一個，它能讓我們只顯示元素的一部分並隱藏其餘部分。其工作原理如下：
假設我們有一個普通的矩形 div 元素。你可以在下面的編輯器中單擊 Run 執行並檢視渲染後的 HTML。（譯註：原文內有線上程式碼編輯器，此處僅貼出程式碼，可自行 copy 測試。）
div {
width: 200px;
height: 200px;
background: url(https://goo.gl/BeSyyD);
}複製程式碼<div></div>複製程式碼為了實現三角形，我們需要使用 polygon() 函式。其引數為以逗號分隔的平面座標點，這些座標點定義了我們的剪下遮罩的形狀。三角形 = 3個點。可以試著更改值並檢視形狀是如何變化的。
div {
width: 200px;
height: 200px;
background: url(https://goo.gl/BeSyyD);
/* 三個點分別為：中上的點，左下的點，右下的點 */
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}複製程式碼<div></div>複製程式碼建立的路徑中的所有內容都會保留，而路徑外內容會被隱藏。通過這種方式，我們不僅可以製作三角形，還可以製作出各種不規則的形狀，且這些形狀可像普通的 CSS 塊一樣。（譯註：即可以正常運用 CSS 屬性在這些形狀上）
這種方法唯一的缺點就是是我們需要自行計算點的座標來得到一個好看的三角形。
不過，它比使用邊框或▲（譯註：正三角的 Unicode 字元）更好。
瀏覽器支援
如果你檢視 clip-path 的 caniuse 頁面，一開始你發現貌似相容性非常不好，但事實上，該屬性在 Chrome 中能正常工作，且不需要字首，在 Safari 中需要加 -webkit- 字首。Firefox 53 版本以上可用。IE / Edge 一貫的不支援，未來也許會支援。
關於 clip-path 屬性有很多小技巧，包括 SVG 的“奇幻”用法。瞭解更多，請檢視下面的連結。
