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

CSS を使用して Div 背景に斜めの線を作成する

追加することで div の外観を整えたい場合がよくあります。背景に斜めの線が入ります。これにより、デザインにクリエイティブなタッチが加わり、視覚的な魅力が高まります。興味深いことに、適切な CSS テクニックを使用すれば、この効果を実現することがかなり可能です。この記事では、このタスクに効果的に取り組む方法に関する包括的なガイドを提供します。

クエリでは、提供された画像に示されているものと同様の対角線を作成する必要性について説明しました。背景画像を維持することは重要ですが、既存のデザインを補完する斜めの線を追加すると、全体の美しさが向上します。

線形グラデーションと Calc() を利用する

これに取り組むにはこの課題に対して、CSS3 の線形グラデーションと calc() を組み合わせることで、エレガントなソリューションが提供されます。線形グラデーションを使用すると、指定した方向に沿って滑らかな色の遷移を作成できます。この場合、2 つの線形グラデーションを使用して対角線を形成します。

calc() 関数を使用すると、値を動的に計算し、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%);
}

この CSS コードは、2 つの線形グラデーションを作成します。1 つは左上に向かって、もう 1 つは右上に向かって傾きます。 calc() 関数は、対角効果を作成するために 0.8 ピクセルのわずかなオフセットを使用して、線の中心が div の中点と位置合わせされるようにします。

div に「crossed」クラスを適用することにより、次の HTML コードに示すように、div の背景に斜線が表示されます:

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

色の値を忘れずに調整してください。線形グラデーションで希望の線の色に合わせます。このソリューションを使用すると、任意の div 背景に斜めの線を簡単に追加でき、デザインにユニークで視覚的に魅力的なタッチを加えることができます。

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