如何仅使用 CSS 在 Div 背景上创建对角线？

使用纯 CSS 在 Div 背景上绘制对角线

要在不使用图像的情况下将所需的对角线添加到 div 背景，请使用以下 CSS 解决方案：

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

该解决方案利用 CSS3 线性渐变和 calc() 来连接线条，确保自动缩放到 div 的大小 方面。使用渐变可以创建两条对角线，而不需要额外的背景图像。

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