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

使用 CSS 在 DIV 背景中建立對角線

問題陳述

考慮以下 HTML 和 CSS 程式碼：

<div class="preview-content">
  PREVIEW
</div>

.preview-content {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat;
  width: 100%;
  min-height: 300px;
  max-height: 300px;
  line-height: 300px;
  text-align: center;
  vertical-align: middle;
  font-size: 2em;
}

考慮以下 HTML 和 CSS 程式碼：

考慮以下 HTML 和 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%);
}

目標是在預覽內容的背景上添加對角線div，如下圖所示：

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

[帶有對角線的DIV 圖像]解決方案可以實現動態調整元素尺寸的可擴展解決方案使用CSS3 線性漸變和calc() 函數。

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