Comment diviser un cercle en deux sur le front-end Web

Dans la conception web front-end, les cercles sont largement utilisés. Parmi eux, la conception consistant à diviser un cercle en deux moitiés est devenue de plus en plus populaire ces dernières années. Les concepteurs Web utilisent cette technique de conception pour augmenter l'attrait visuel d'une page Web tout en conservant sa simplicité. Cet article présentera plusieurs façons de diviser un cercle en deux dans une interface Web.

Méthode 1 : utiliser les bordures CSS

La première méthode consiste à utiliser les bordures CSS. Dans ce cas, nous pouvons diviser le conteneur circulaire en deux moitiés en représentant les moitiés supérieure et inférieure du conteneur circulaire avec des couleurs de bordure différentes. Nous pouvons créer cet effet en définissant une moitié supérieure plus large et une moitié inférieure plus étroite.

Voici un peu de code CSS utilisé pour créer cet effet :

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

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

Dans le code ci-dessus, nous avons créé un élément div appelé .container où nous définissons la border- The radius La propriété code> le transforme en un conteneur circulaire. Nous le divisons ensuite en deux en définissant les bordures supérieure et inférieure de l'attribut <code>border. Enfin, nous utilisons la classe .top pour définir la couleur de la bordure de la moitié supérieure sur rouge. .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>

Méthode 2 : Utiliser les transformations CSS

La deuxième méthode consiste à utiliser les transformations CSS. Dans ce cas, vous pouvez utiliser l'attribut transform: skew() et les pseudo-éléments :before et :after pour diviser le conteneur circulaire. en deux moitiés.

Voici un peu de code CSS utilisé pour créer cet effet : 🎜rrreee🎜Dans le code ci-dessus, nous avons créé un élément div appelé .container où nous définissons la border- The radius La propriété code> le transforme en un conteneur circulaire. Nous utilisons ensuite les pseudo-éléments <code>:before et :after pour créer les moitiés supérieure et inférieure. Nous pouvons créer cet effet en définissant leur largeur et l'attribut transform: skew(). 🎜🎜Troisième méthode : utiliser SVG🎜🎜La troisième méthode consiste à utiliser SVG. Dans ce cas, vous pouvez utiliser l'élément <path> pour créer un chemin semi-circulaire et le combiner avec d'autres éléments SVG pour créer un effet de séparateur. 🎜🎜Voici du code HTML et SVG utilisé pour créer cet effet : 🎜rrreee🎜Dans le code ci-dessus, nous créons un élément div appelé .container et ajoutons un élément SVG à l'intérieur. Nous avons ensuite créé un chemin semi-circulaire à l'aide de l'élément <path> et défini sa couleur sur noir à l'aide de la couleur de remplissage. Enfin, nous créons cet effet en utilisant des éléments ronds et en les plaçant dans un conteneur rond. 🎜🎜Conclusion🎜🎜Dans la conception web front-end, il est très courant d'utiliser des conteneurs circulaires. Diviser un conteneur rond en deux peut augmenter l’attrait visuel de la page tout en la gardant simple. Cet article décrit trois façons de diviser un conteneur circulaire en deux moitiés dans une interface Web : en utilisant les bordures CSS, en utilisant les transformations CSS et en utilisant SVG. Chaque méthode a ses avantages et ses inconvénients, et vous pouvez choisir la méthode qui vous convient en fonction de vos besoins. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!