Heim >Web-Frontend >CSS-Tutorial >Wie zeichnet man einen rechten Halbkreis in CSS?
Wie zeichnet man einen rechten Halbkreis in CSS?
- WBOYOriginal
- 2021-12-06 11:46:143654Durchsuche
Methode: 1. Fügen Sie dem Element den Stil „Breite: Breitenwert; Höhe: Höhenwert;“ hinzu und stellen Sie das Element auf ein Rechteck mit einer Breite ein, die halb so groß ist wie die Höhe. 2. Fügen Sie „Rahmenradius: 0 Rechteckbreite“ hinzu Wert „Rechteckbreite“ auf den Stil des Elements „Wert 0;“, legt abgerundete Ecken auf das Rechteck fest und legt dann das Rechteck auf den Stil des rechten Halbkreises fest.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So zeichnen Sie einen rechten Halbkreis in CSS
In CSS können Sie zunächst ein rechteckiges Element erstellen, dessen Breite halb so hoch ist wie folgt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 50px;
height: 100px;
background-color:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Ausgabeergebnis:
Verwenden Sie dann das Attribut „border-radius“, um es festzulegen. Für den Stil mit abgerundeten Ecken auf der rechten Seite stellen Sie einfach den Wert für die abgerundeten Ecken so ein, dass er so groß ist wie der Breitenwert. Das Beispiel lautet wie folgt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 50px;
height: 100px;
background-color:red;
border-radius: 0 50px 50px 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonWie zeichnet man einen rechten Halbkreis in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!