CSSを使用してDIVに斜めの線の背景を作成するにはどうすればよいですか?

CSS を使用して DIV 背景に斜めの線を追加する

質問:

背景に斜めの線を追加するにはどうすればよいですか?のみを使用した DIV 要素のCSS?

注: 希望する効果は、提供された画像に示されているとおりです。

解決策:

要素の寸法に自動的に調整するには、 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%);
}

注: HTML の例は次のようになります:

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

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