如何僅使用 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中文網其他相關文章！