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

このソリューションは、calc() で CSS3 線形勾配を利用して線を接続し、自動スケーリングを保証します。 div のディメンションに合わせます。グラデーションを使用すると、追加の背景画像を必要とせずに 2 本の対角線を作成できます。

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