Wie zeichnet man einen rechten Halbkreis in CSS?-CSS-Tutorial-php.cn

Wie zeichnet man einen rechten Halbkreis in CSS?

WBOY

Freigeben： 2021-12-06 11:46:14

Original

3663 Leute haben es durchsucht

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.

Wie zeichnet man einen rechten Halbkreis in CSS?

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>

Nach dem Login kopieren

Ausgabeergebnis:

Wie zeichnet man einen rechten Halbkreis in CSS?

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>

Nach dem Login kopieren

Ausgabeergebnis:

Wie zeichnet man einen rechten Halbkreis in CSS?

(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!