CSS と SVG を使用して端が曲がった丸い境界線を作成するにはどうすればよいですか?

CSS と SVG を使用して端が丸い曲線の境界線を作成する

Web サイトを構築するとき、創造的なソリューションを必要とするデザインの詳細に遭遇するのが一般的です。 。そのような詳細の 1 つは、端が曲がった丸い境界線の作成です。

問題:
Web デザイナーは、CSS を使用して端が曲がった丸い境界線を作成するのに苦労しています。彼らは丸い角を使用してこれを実現しようとしましたが、望ましい形状は生成されません。

解決策:
端が丸い曲線の境界線を作成するには、Scalable Vector を利用できます。背景としてグラフィックス (SVG)。 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 は、水平線で始まり、下向きの曲線に移行するパスを定義します。 CSS を使用して、この SVG を曲線の境界線を付けたい要素の背景として設定できます。

更新された CSS コードは次のとおりです:

.circle {
  display: inline-block;
  position: relative;
  top: -28px;
  border-radius: 100%;
  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;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}

カスタム SVG 形状を組み合わせることで、 CSS の背景プロパティを使用すると、目的のデザインを模倣した、端が曲がった丸い境界線を作成できます。

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