ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS を使用して 2 つの Div 間に S 字型のグラデーション カーブを作成する方法

CSS を使用して 2 つの Div 間に S 字型のグラデーション カーブを作成する方法

Linda Hamilton
リリース: 2024-11-29 03:24:14
オリジナル
256 人が閲覧しました

How to Create an S-Shape Gradient Curve Between Two Divs Using CSS?

CSS を使用した 2 つのグラデーション間の S 字型曲線の作成

グラデーションの背景を持つ 2 つの div 間に S 字型曲線を作成することは、グラフィック デザインの課題です。さまざまな手法を使用できますが、それぞれに独自の制限があります。

既存の手法とその欠点

  • SVG: SVG の利用カーブを作成するのは取り扱い時に難しい場合がありますgradients.
  • Border-radius: border-radius を使用して真の S カーブを実現することは、特に画面のサイズを変更する場合には困難です。
  • クリップ パス: クリップパスは有望な方法ではありますが、広くサポートされているわけではありません。ブラウザ。
  • PNG 画像: コンテンツが動的である必要があるため、PNG 画像の使用は実現できません。

解決策: SVG を使用した LinearGradient

linearGradient と SVG の組み合わせにより、効果的な 解決。方法は次のとおりです。

.container {
  width: 500px;
  height: 200px;
  background:linear-gradient(to bottom right, #de350b, #0065ff);
}
svg {
  width:100%;
}

svg {
  width: 500px;
  height: 200px;
}

linearGradient {
  x1: 0%;
  y1: 0%;
  x2: 100%;
  y2: 100%;
}
ログイン後にコピー
<div class="container">
  <svg xmlns='http://www.w3.org/2000/svg' viewBox="0 0 64 64">
    <defs>
      <linearGradient>
ログイン後にコピー

このソリューションでは、SVG 要素を div 上に配置して、グラデーション カーブを作成します。 SVG に使用されるパスは曲線を表し、linearGradient は色の遷移を定義します。

以上がCSS を使用して 2 つの Div 間に S 字型のグラデーション カーブを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート