CSS中如何只用線性漸變繪制正方形的對角線？

巧用css線性漸變繪制正方形對角線，無需圖片或SVG！本文介紹一種高效簡潔的CSS技巧，利用線性漸變(linear-gradient)在正方形區域內繪制清晰的對角線。

通常，繪制對角線會使用圖片或SVG，但CSS提供了更優方案。通過精準控制線性漸變的方向和顏色過渡，即可輕松實現。

關鍵在于linear-gradient函數的參數設置。以下代碼展示了核心技巧：

.box {   background: linear-gradient(to right bottom, transparent calc(50% - .5px), currentColor calc(50% + .5px), transparent 0); }

代碼解讀：

立即學習“前端免費學習筆記（深入）”；

• linear-gradient(to right bottom, …): 設定漸變方向為從左上到右下，模擬對角線效果。
• transparent calc(50% – .5px): 漸變起始為透明色，calc(50% – .5px)精確控制透明區域的寬度，避免模糊。
• currentColor calc(50% + .5px): 漸變中間使用currentColor繼承父元素顏色，calc(50% + .5px)控制顏色區域寬度。
• transparent 0: 漸變結束為透明色。

.5px的微調確保對角線清晰銳利，避免斷裂或模糊。 將.box類應用于一個width和height值相同的正方形元素（例如div），即可看到效果。 無需任何圖片資源，即可輕松繪制出正方形的對角線。