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;
}

目的は、プレビュー コンテンツの背景に斜線を追加することです次の図に示す div:

[斜線のある DIV のイメージ]

ソリューション

要素の寸法に動的に調整するスケーラブルなソリューションを実現できます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%);
}

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

以上がCSS を使用して DIV 背景に斜めの線を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。