SVG を使用して CSS で曲線の境界線を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

SVG を使用して CSS で曲線の境界線を作成するにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-12-17 17:22:21

オリジナル

447 人が閲覧しました

How Can I Create a Curved Border with CSS Using SVG?

CSS を使用して曲線の境界線を作成する

Web サイトの美しさを高める探求の中で、丸い境界線を作成するという課題に遭遇しました。曲がった端。この効果を実現するには、SVG を背景として利用するソリューションを検討してみましょう。

CSS の実装

既存の CSS コードを次のように変更します。

.bottom-bar {
  /* ... (existing code) ... */
}

.circle {
  /* ... (existing code) ... */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 45 15'  width='64' height='64' fill='%2329a7e8'><path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' /></svg>") 0 0/100% 100% no-repeat;
}

ログイン後にコピー

SVG作成

さらに、境界線の湾曲した背景として機能する SVG 画像を作成する必要があります。

<svg xmlns='http://www.w3.org/2000/svg'
  viewBox='10 10 45 15'
  width='64' height='64'
  fill='#29a7e8'>
  <path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' />
</svg>

ログイン後にコピー

この SVG 背景を組み込むことで、効果的に望ましい曲線状の境界線効果を加えて、Web サイトに視覚的に魅力的なタッチを与えます。

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