Maison >interface Web >tutoriel CSS >Comment faire un trapèze rectangle avec CSS
Comment faire un trapèze rectangle avec CSS
- WBOYoriginal
- 2021-12-03 17:09:188274parcourir
En CSS, vous pouvez utiliser l'attribut border pour créer un trapèze à angle droit. La syntaxe est "élément {border: 0px solid transparent; border-top: hauteur du trapèze couleur unie; border-left: longueur du trapèze solid transparent}" .
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment créer un trapèze rectangle en CSS
En CSS, vous pouvez d'abord définir la taille de la bordure de l'élément vide sur 0 et la couleur sur transparente, puis définir la taille de la bordure d'un côté sur la hauteur du trapèze et définissez la bordure. La couleur est la couleur du trapèze.
L'attribut border doit être utilisé. L'exemple est le suivant :
<!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>
</head>
<body>
<div class='ti'><div>
<style>
.ti {
height:100px;
width:100px;
border:0px solid transparent;
border-top:60px solid #000;
}
</style>
</body>
</html>Résultat de sortie :
Définissez ensuite la valeur d'épaisseur d'une bordure à côté de la bordure qui a défini la couleur. définir la couleur, ou la couleur transparente, exemple Comme suit :
<!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>
</head>
<body>
<div class='ti'><div>
<style>
.ti {
height:100px;
width:100px;
border:0px solid transparent;
border-top:60px solid #000;
border-left:50px solid transparent;
}
</style>
</body>
</html>Résultats de sortie :
(Partage vidéo 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!