Comment faire un trapèze rectangle avec CSS-tutoriel CSS-php.cn

Comment faire un trapèze rectangle avec CSS

WBOY

Libérer： 2021-12-03 17:09:18

original

8134 Les gens l'ont consulté

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}" .

Comment faire un trapèze rectangle avec CSS

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=&#39;ti&#39;><div>
<style>
.ti {
    height:100px;
width:100px;
border:0px solid transparent;
border-top:60px solid #000;
        }
</style>
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment faire un trapèze rectangle avec CSS

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=&#39;ti&#39;><div>
<style>
.ti {
    height:100px;
width:100px;
border:0px solid transparent;
border-top:60px solid #000;
border-left:50px solid transparent;
        }
</style>
</body>
</html>

Copier après la connexion

Résultats de sortie :

Comment faire un trapèze rectangle avec CSS