CSS のみを使用して DIV 背景に斜線を作成する方法

CSS を使用して DIV 背景に斜線を作成する

問題:

DIV を拡張する添付の画像に見られるように、背景に斜線を表示するプレビュー ボックス。リクエストでは、可能な場合にのみ CSS を使用することが指定されています。

CSS3 線形グラデーションを使用した解決策:

要素の寸法に合わせて線を自動的に拡大縮小するには、CSS3 線形グラデーションを組み合わせたものを使用します。 calc()を使って。このソリューションは、Chrome のさまざまなバージョンと互換性があります:

.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></textarea>

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