線形グラデーションを使用して背景画像の滑らかなエッジの尖った端を作成する方法

滑らかなエッジの背景画像の尖った端の線形グラデーションの調整

問題:

画像の尖った下端の作成2 つの応答性のある三角形で線形グラデーションを使用すると、ギザギザのエッジが生成されます。

解決策:

ギザギザのエッジを除去するには、線形グラデーション画像の色を突然停止しないようにします。 。代わりに、ストップ ポイントを変更して、微妙なぼかし効果を作成します。

<code class="css">.lefttriangle {
  ...
  background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%);
}
.righttriangle {
  ...
  background: linear-gradient(to left top, #ffffff 48%, transparent 50%);
}</code>

この調整により、2 番目の色の始まりが最初の色の終わりからわずかにずれます。よりスムーズな移行。

以上が線形グラデーションを使用して背景画像の滑らかなエッジの尖った端を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。