如何使用 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中文网其他相关文章！