CSS と SVG を使用して端が曲がった円を作成する方法

曲線の境界線 CSS: 端が曲線状の円を実現する

Web サイトの外観をカスタマイズする場合、共通の課題は複雑な形状と境界線を作成することにあります。具体的なリクエストの 1 つは、端が曲がった円を形成する境界線の作成です。

これに取り組むために、境界線要素の背景として SVG を使用するソリューションを検討します。 SVG (スケーラブル ベクター グラフィックス) を使用すると、簡単にスケーラブルでさまざまなデバイス間で移植できる複雑な形状とグラデーションを作成できます。

改訂された内容の内訳は次のとおりです。コード:

CSS:

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

HTML:

<div>

説明:

1. SVG を次のように追加します。 .circle 要素の背景画像。 SVG 形状は、円の湾曲した端を定義します。
2. 連続した曲線の錯覚を作成するために、.circle 要素を下部バーの少し上に配置します。
3. SVG はメインの外側に配置されます。

この更新されたコードにより、提供された例に似た、端が曲がった丸い境界線が提供され、目的の結果が得られます。元の質問では。

以上がCSS と SVG を使用して端が曲がった円を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。