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

境界線 CSS: 円で曲線エッジを作成する

Web デザインでは、美観を高めるために曲線状の境界線やエッジを作成することが必要になることがよくあります。ページの。よくある課題の 1 つは、提供された画像に示すように、端が曲がった円を作成することです。

課題: 端が曲がった丸い境界線を実現する

CSS で目的の効果を実現するのは難しい場合があります。 border-radius のみを使用すると、端が細長い曲線ではなく、半円形になります。

解決策: SVG を背景として利用する

CSS で端が曲がった境界線を作成するには、SVG (Scalable Vector Graphics) を利用できます。 SVG では、XML コードを使用して複雑な形状を定義できます。

コード:

.bottom-bar {
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
}

.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"></path></svg>") 0 0/100% 100% no-repeat;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}

説明:

• 背景色、位置、配置を確立するためにコンテナ クラス .bottom-bar を作成します。 height.
• 円を表すクラス .circle を定義します。
• 円を下のバーの少し上に配置するために、top: -28px を設定します。
• background プロパティデータ URI を利用して SVG 画像を背景として埋め込みます。 SVG パスは、端が曲がった形状を定義します。
• 円の寸法と水平方向のマージンを指定します。

SVG を使用する利点:

• SVG はベクター グラフィックスです。つまり、解像度に依存せず、損失することなく拡大縮小できます。
• CSS プロパティ単独と比較して、複雑な形状をより柔軟に作成できます。
• SVG は、HTML および CSS コードに簡単に統合できます。

SVG を背景として使用すると、端が丸い希望の曲線境界線を効果的に実現でき、Web デザインの視覚的な魅力を高めることができます。

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