グラデーションの背景を持つ 2 つの div 間に S 字型曲線を作成することは、グラフィック デザインの課題です。さまざまな手法を使用できますが、それぞれに独自の制限があります。
既存の手法とその欠点
解決策: 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 サイトの他の関連記事を参照してください。