So teilen Sie einen Kreis im Web-Frontend in zwei Hälften

Im Web-Frontend-Design werden Kreise häufig verwendet. Unter ihnen erfreut sich in den letzten Jahren das Design, einen Kreis in zwei Hälften zu teilen, immer größerer Beliebtheit. Webdesigner verwenden diese Designtechnik, um die visuelle Attraktivität einer Webseite zu steigern und gleichzeitig deren Einfachheit beizubehalten. In diesem Artikel werden verschiedene Möglichkeiten vorgestellt, einen Kreis in einem Web-Frontend in zwei Hälften zu teilen.

Methode 1: CSS-Rahmen verwenden

Die erste Methode besteht darin, CSS-Rahmen zu verwenden. In diesem Fall können wir den kreisförmigen Behälter in zwei Hälften teilen, indem wir die obere und untere Hälfte des kreisförmigen Behälters mit unterschiedlichen Randfarben darstellen. Wir können diesen Effekt erzielen, indem wir einen breiteren Rand in der oberen Hälfte und einen schmaleren Rand in der unteren Hälfte festlegen.

Hier ist ein CSS-Code, der zum Erzeugen dieses Effekts verwendet wurde:

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

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

Im obigen Code haben wir ein div-Element mit dem Namen .container erstellt, wobei wir durch Festlegen von border- The radius-Eigenschaft verwandelt es in einen kreisförmigen Behälter. Anschließend teilen wir es in zwei Hälften, indem wir den oberen und unteren Rand des Attributs border festlegen. Schließlich verwenden wir die Klasse .top, um die Rahmenfarbe der oberen Hälfte auf Rot zu setzen. .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>

Methode 2: CSS-Transformationen verwenden

Die zweite Methode ist die Verwendung von CSS-Transformationen. In diesem Fall können Sie das Attribut transform: skew() und die Pseudoelemente :before und :after verwenden, um den kreisförmigen Container zu teilen in zwei Hälften.

Hier ist ein CSS-Code, der zum Erzeugen dieses Effekts verwendet wurde: 🎜rrreee🎜Im obigen Code haben wir ein div-Element mit dem Namen .container erstellt, wobei wir durch Festlegen von border- The radius-Eigenschaft verwandelt es in einen kreisförmigen Behälter. Anschließend verwenden wir die Pseudoelemente :before und :after, um die obere und untere Hälfte zu erstellen. Wir können diesen Effekt erzeugen, indem wir ihre Breite und das Attribut transform: skew() festlegen. 🎜🎜Methode Drei: SVG verwenden🎜🎜Die dritte Methode ist die Verwendung von SVG. In diesem Fall können Sie mit dem Element <path> einen halbkreisförmigen Pfad erstellen und diesen mit anderen SVG-Elementen kombinieren, um einen Trenneffekt zu erzeugen. 🎜🎜Hier ist ein HTML- und SVG-Code, der zum Erzeugen dieses Effekts verwendet wurde: 🎜rrreee🎜Im obigen Code erstellen wir ein div-Element namens .container und fügen darin ein SVG-Element ein. Anschließend haben wir mithilfe des Elements <path> einen halbkreisförmigen Pfad erstellt und dessen Farbe mithilfe der Füllfarbe auf Schwarz festgelegt. Schließlich erzeugen wir diesen Effekt, indem wir runde Elemente verwenden und diese in einen runden Behälter legen. 🎜🎜Fazit🎜🎜Im Web-Frontend-Design werden häufig kreisförmige Container verwendet. Das Teilen eines runden Behälters in zwei Hälften kann die optische Attraktivität der Seite steigern und sie gleichzeitig schlicht halten. In diesem Artikel werden drei Möglichkeiten beschrieben, einen kreisförmigen Container in einem Web-Frontend in zwei Hälften zu teilen: die Verwendung von CSS-Rändern, die Verwendung von CSS-Transformationen und die Verwendung von SVG. Jede Methode hat ihre Vor- und Nachteile, und Sie können je nach Ihren Bedürfnissen die Methode auswählen, die für Sie am besten geeignet ist. 🎜

Das obige ist der detaillierte Inhalt vonSo teilen Sie einen Kreis im Web-Frontend in zwei Hälften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!