三角形の背景で線形グラデーションの滑らかな線を実現するにはどうすればよいですか?

線形グラデーションにより背景画像にギザギザのエッジが作成される: 線を滑らかにする方法

画像上に尖った下端を作成する試み、基部に 2 つの応答する三角形を作成することを選択できます。ただし、このようなデザインで滑らかなラインを実現するのは困難な場合があります。元の質問で述べたように、この目的で使用される線形グラデーションは、「ハードストップ」動作によりギザギザのエッジを示す傾向があります。

解決策は、グラデーション内の色の遷移を変更することにあります。 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>

ストップとスタートを調整することにより、図に示すように、色の変化が急激ではなくなり、三角形の根元の線の滑らかさが向上します。この解像度により、応答性を損なうことなくほとんどの最新ブラウザとの互換性が実現されることは注目に値します。

以上が三角形の背景で線形グラデーションの滑らかな線を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。