Web フロントエンドで円を半分に分割する方法

Web フロントエンド デザインでは、サークルが広く使用されています。中でも近年人気が高まっているのが、円を二等分したデザインです。 Web デザイナーは、Web ページのシンプルさを維持しながら視覚的な魅力を高めるためにこのデザイン手法を使用します。この記事では、Web フロントエンドで円を半分に分割するいくつかの方法を紹介します。

方法 1: CSS ボーダーを使用する

最初の方法は、CSS ボーダーを使用することです。この場合、円形コンテナの上半分と下半分を異なる境界線の色で表現することで、円形コンテナを 2 つの半分に分割できます。この効果は、上半分の境界線を広く設定し、下半分の境界線を狭く設定することで作成できます。

この効果を作成するために使用される CSS コードは次のとおりです:

<code>.container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 15px solid black;
  border-bottom: none;
}

.top {
  border-color: red;
}</code>

上記のコードでは、.container という名前の div 要素を作成しました。ここでは、border- 半径 を設定しています。 > プロパティを使用すると、円形のコンテナーに変わります。次に、 border 属性の上下の境界線を設定して、それを半分に分割します。最後に、.top クラスを使用して、上半分の境界線の色を赤に設定します。 .container 的 div 元素，其中通过设置 border-radius 属性将其变成了一个圆形容器。然后，我们通过设置 border 属性的上下边框来将其分成两半。最后，我们使用 .top 类来设置上半部分的边框颜色为红色。

方法二：使用 CSS Transforms

第二种方法是使用 CSS Transforms。在这种情况下，可以使用 transform: skew() 属性和 :before 和 :after 伪元素来将圆形容器分成两半。

以下是一些 CSS 代码，用于创建此效果：

<code>.container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
}

.container:before, .container:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  transform-origin: center center;
  transform: skew(45deg);
}

.container:before {
  left: 0;
  background: black;
}

.container:after {
  right: 0;
  background: red;
  transform: skew(-45deg);
}</code>

在上面的代码中，我们创建了一个名为 .container 的 div 元素，其中通过设置 border-radius 属性将其变成了一个圆形容器。然后，我们使用 :before 和 :after 伪元素来创建上半部分和下半部分。通过设置它们的宽度和 transform: skew() 属性，我们可以创建这种效果。

方法三：使用 SVG

第三种方法是使用 SVG。在这种情况下，可以使用 <path> 元素来创建一个半圆形的路径，并将其与其他 SVG 元素组合起来，以创建分隔符效果。

以下是一些 HTML 和 SVG 代码，用于创建此效果：

<code><div class="container">
  <svg viewBox="0 0 100 100">
    <path d="M50,0 A50,50 0 0 1 100,50 L50,50 Z" fill="black"></path>
    <circle r="50" cx="50" cy="50" fill="none" stroke="black"></circle>
  </svg>
</div></code>

在上面的代码中，我们创建了一个名为 .container 的 div 元素，并在其中添加一个 SVG 元素。然后，我们使用 <path>

方法 2: CSS Transform を使用する

2 番目の方法は、CSS Transform を使用することです。この場合、 transform: skew() 属性と :before および :after 擬似要素を使用して、円形コンテナを分割できます。 2つの半分に分けます。

この効果を作成するために使用される CSS コードは次のとおりです: 🎜rrreee🎜 上記のコードでは、.container という名前の div 要素を作成しました。ここでは、border- 半径 を設定しています。 > プロパティを使用すると、円形のコンテナーに変わります。次に、 :before および :after 擬似要素を使用して、上半分と下半分を作成します。この効果は、幅と transform: skew() 属性を設定することで作成できます。 🎜🎜方法 3: SVG を使用する🎜🎜 3 番目の方法は、SVG を使用することです。この場合、<path> 要素を使用して半円形のパスを作成し、それを他の SVG 要素と組み合わせてセパレータ効果を作成できます。 🎜🎜この効果の作成に使用される HTML および SVG コードは次のとおりです: 🎜rrreee🎜 上記のコードでは、.container という div 要素を作成し、その要素内に SVG を追加します。次に、<path> 要素を使用して半円形のパスを作成し、塗りつぶしの色を使用してその色を黒に設定しました。最後に、丸い要素を使用し、それらを丸いコンテナ内に配置することで、この効果を作成します。 🎜🎜結論🎜🎜 Web フロントエンド デザインでは、円形コンテナを使用するのが非常に一般的です。丸いコンテナを半分に分割すると、ページをシンプルに保ちながら、視覚的な魅力を高めることができます。この記事では、Web フロントエンドで円形コンテナを 2 つの半分に分割する 3 つの方法 (CSS 境界線を使用する方法、CSS Transforms を使用する方法、SVG を使用する方法) について説明します。それぞれの方法には長所と短所があり、ニーズに応じて自分に合った方法を選択できます。 🎜

以上がWeb フロントエンドで円を半分に分割する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。