如何使用 CSS 在 DIV 上建立對角線背景？

使用CSS在DIV背景上加入對角線

問題：

如何在背景中加入對角線僅使用DIV 元素的CSS？

注意：所需的效果如提供的影像所示。

解：

要自動調整元素的尺寸，請使用CSS3 線性漸變與calc() 函數，如圖所示：

.crossed {
     background: 
         linear-gradient(to top left,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 0.8px),
             rgba(0,0,0,1) 50%,
             rgba(0,0,0,0) calc(50% + 0.8px),
             rgba(0,0,0,0) 100%),
         linear-gradient(to top right,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 0.8px),
             rgba(0,0,0,1) 50%,
             rgba(0,0,0,0) calc(50% + 0.8px),
             rgba(0,0,0,0) 100%);
}

注意： HTML 範例為：

<textarea class="crossed"></textarea>

以上是如何使用 CSS 在 DIV 上建立對角線背景？的詳細內容。更多資訊請關注PHP中文網其他相關文章！