Maison > Article > interface Web > Comment écrire un pentagone irrégulier en CSS3
Comment écrire un pentagone irrégulier en CSS3
- WBOYoriginal
- 2021-12-16 18:19:383186parcourir
Écriture : 1. Utilisez l'instruction "border: length solid transparent; border-right: height solid color" pour définir l'élément sur un style de triangle. 2. Utilisez l'instruction "margin: value" pour définir l'élément triangulaire et un élément rectangulaire de même largeur que le triangle. L'espacement est de 0.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment écrire un pentagone irrégulier en CSS3
En CSS, si nous voulons écrire un pentagone irrégulier, nous devons d'abord créer un triangle et un élément rectangle de la même largeur que le triangle, puis éliminer L'espacement entre ces deux éléments est aussi long qu'un triangle et un rectangle sont assemblés en un pentagone irrégulier.
L'exemple est le suivant :
<!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>Résultat de sortie :
(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!