CSS と SVG を使用して端が曲がった丸い境界線を作成する方法-CSSチュートリアル-php.cn

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

DDD

リリース： 2024-12-21 00:08:09

オリジナル

718 人が閲覧しました

How to Create a Rounded Border with a Curved End Using CSS and SVG?

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

CSS で端が曲線の丸い境界線を作成するという課題に直面しています。このニーズに対処するソリューションを見てみましょう。

望ましい効果を達成する鍵は、枠線の背景として SVG (スケーラブルベクターグラフィックス) を利用することにあります。この手法を採用すると、滑らかに湾曲したエッジを持つ複雑な形状を簡単に作成できます。

ソリューションを実装する方法は次のとおりです。

.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;
}

ログイン後にコピー

上記のコードでは、.circle クラスはSVG データ URI を指定するには、background プロパティを使用します。この URI は、要素の背景として使用される曲線形状を定義する SVG 画像を参照します。 SVG の viewBox 属性は SVG 空間内での形状のサイズと位置を設定し、path 要素は湾曲した形状自体を定義します。

パス定義の値を調整することで、形状の曲率とサイズを制御できます。形。また、fill 属性を変更して境界線に別の色を適用することもできます。

この手法は、CSS で曲線境界線を作成する柔軟かつスケーラブルな方法を提供し、Web デザインで視覚的に魅力的で動的な効果を実現できます。

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