線性漸變在背景圖像中創建鋸齒狀邊緣：如何平滑線條

努力在圖像上創建尖的底部邊緣，人們可以選擇在底部產生兩個響應三角形。然而，在這樣的設計中實現平滑的線條可能具有挑戰性。正如原始問題中所提到的，用於此目的的線性漸變由於其“硬停止”行為而往往會表現出鋸齒狀邊緣。

解決方案在於修改漸層內的顏色過渡。透過將第二種顏色的起點稍微移離第一種顏色的終點，可以引入微妙的模糊效果。這樣可以緩解銳利的色彩過渡，讓線條更加平滑。

參考原始程式碼，以下列方式修改 Linear-gradient 屬性：

.lefttriangle {
  ...
  background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%);
}

.righttriangle {
  ...
  background: linear-gradient(to left top, #ffffff 48%, transparent 50%);
}

透過如圖所示調整停止點和起始點，顏色過渡變得不那麼突然，增強了三角形底部線條的平滑度。值得注意的是，該解析度在不影響響應能力的情況下實現了與大多數現代瀏覽器的兼容性。