2024 年に CSS のみを使用して部分的に境界線のある円形を作成するには?

Patricia Arquette
リリース: 2024-11-01 08:18:30
オリジナル
927 人が閲覧しました

How to Create Circular Shapes with Partial Borders Using Only CSS in 2024?

HTML5/CSS3 で部分的に境界線のある円を作成する

HTML5/CSS3 を使用して、部分的に境界線が見える円形を作成するというタスクがある場合、それが均等であるかどうかという疑問が生じます。可能。この記事では、2024 年のソリューションに焦点を当てて、この効果を達成するためのさまざまなテクニックを検討します。

2024 ソリューション: 最先端のアプローチ

2024 ソリューションは、JavaScript、追加要素、または擬似要素なしで動作します。要素。 CSS 宣言のみに依存し、半透明の背景でも非常に優れたパフォーマンスを発揮します。

この革新的なアプローチには、次の 2 層マスクが含まれます。

  • レイヤー 1 (Conic-グラデーション マスク): このマスクは、ボーダー ボックスに対する円錐グラデーションを利用し、12 時から時計回りに円のカスタマイズ可能な部分 (--p で制御) を表示します。
  • レイヤー 2 (フル カバレッジ マスク): このマスクはパディング ボックス内の領域全体を囲み、境界線が円の周囲内にしっかりと残るようにします。

コードスニペット

次のコード サンプルは、2024 年のソリューションを示しています。

<code class="css">.circular-progress {
  border: solid 1.5em hotpink;
  width: 50vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: hsla(180, 100%, 50%, .5);
  mask: 
    linear-gradient(red 0 0) padding-box, 
    conic-gradient(red var(--p, 17%), transparent 0%) border-box
}

/* To demonstrate compatibility with semi-transparent backgrounds */
body {
  background: 
    url(https://images.unsplash.com/photo-1693483923875-cdd9ef4a8046?w=800) 
      50%/ cover
}</code>
ログイン後にコピー
<code class="html"><div class='circular-progress'></div></code>
ログイン後にコピー

この CSS コードを使用すると、部分的に表示される境界線を持つ円形の図形を簡単に作成できるようになります。 --p 変数を使用すると、境界線の表示部分を柔軟に制御できるため、さまざまなデザイン ニーズに対応する多用途のソリューションになります。

以上が2024 年に CSS のみを使用して部分的に境界線のある円形を作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート