如何仅使用 CSS 在 DIV 背景中创建对角线？

使用 CSS 在 DIV 背景中创建对角线

问题：

增强 DIV用于在背景中显示对角线的预览框，如附图所示。该请求指定仅在可行的情况下才使用 CSS。

使用 CSS3 线性渐变的解决方案：

要自动将线条缩放到元素的尺寸，请使用 CSS3 线性渐变组合与 calc().此解决方案兼容各个版本的 Chrome：

.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%);
}

<textarea>

以上是如何仅使用 CSS 在 DIV 背景中创建对角线？的详细内容。更多信息请关注PHP中文网其他相关文章！