Heim >Web-Frontend >CSS-Tutorial >Wie schreibe ich ein unregelmäßiges Fünfeck in CSS3?
Wie schreibe ich ein unregelmäßiges Fünfeck in CSS3?
- WBOYOriginal
- 2021-12-16 18:19:383226Durchsuche
Schreiben: 1. Verwenden Sie die Anweisung „border: length solid transparent; border-right: height solid color“, um das Element auf einen Dreiecksstil festzulegen. 2. Verwenden Sie die Anweisung „margin: value“, um das Dreieckselement festzulegen rechteckiges Element mit der gleichen Breite wie das Dreieck. Der Abstand ist 0.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So schreiben Sie ein unregelmäßiges Fünfeck in CSS3
Wenn wir in CSS ein unregelmäßiges Fünfeck schreiben möchten, müssen wir zuerst ein Dreieck und ein Rechteckelement mit der gleichen Breite wie das Dreieck erstellen und dann entfernen Der Abstand zwischen diesen beiden Elementen ist so lang, wie ein Dreieck und ein Rechteck zu einem unregelmäßigen Fünfeck zusammengefügt werden.
Das Beispiel sieht wie folgt aus:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五边形</title>
<style type="text/css">
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid red;
border-bottom: 50px solid transparent;
float: left;
}
#left{
width: 200px;
height: 100px;
background: red;
margin-left: 50px;
}
</style>
</head>
<body>
<div id="triangle-left"></div>
<div id='left'></div>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonWie schreibe ich ein unregelmäßiges Fünfeck in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!