Heim > Artikel > Web-Frontend > So verstecken Sie einen halben Kreis in CSS
So verstecken Sie einen halben Kreis in CSS
- WBOYOriginal
- 2021-12-09 15:56:582561Durchsuche
Methode: 1. Platzieren Sie das kreisförmige Element im Div-Container. 2. Stellen Sie die Höhe des Div auf den Radius des Kreises und die Breite des Div auf den Durchmesser des Kreises ein, sodass nur die Hälfte davon vorhanden ist div kann platziert werden. 3. Fügen Sie dem div-Element den Stil „overflow:hidden“ hinzu und verbergen Sie den Halbkreis außerhalb des div.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So verbergen Sie einen halben Kreis in CSS
In CSS können Sie zunächst ein kreisförmiges Element in ein Div einfügen und dann die Höhe des Divs auf den Radius des Kreises und die Breite auf den festlegen Kreisdurchmesserlänge.
Zu diesem Zeitpunkt können Sie das Überlaufattribut verwenden, um den kreisförmigen Teil hinter dem Div auszublenden.
Das Beispiel sieht wie folgt aus:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.mask2{
width: 100px;
height: 50px;
overflow: hidden;
}
.round2{
width: 100px;
height: 100px;
background-color: cornflowerblue;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="mask2">
<div class="round2"></div>
</div>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo verstecken Sie einen halben Kreis in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!