Maison > Article > interface Web > Comment réaliser un trapèze en CSS3

Comment réaliser un trapèze en CSS3

WBOYoriginal: 2021-12-02 17:40:392654parcourir

En CSS, vous pouvez utiliser les attributs border et « border-top » pour obtenir un effet trapézoïdal. Il vous suffit d'ajouter le « border : valeur d'épaisseur solid transparent ; border-top : trapezoid height solid trapezoid style ; » l'élément.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Comment réaliser un trapèze en css3

En css, si on veut créer un effet de motif trapézoïdal, comment y parvenir ? L'exemple suivant explique comment obtenir un effet de motif trapézoïdal en CSS3.

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>
    <style type="text/css">
div{
    border:25px solid transparent;
    border-top: 25px solid red;
  height: 200px;
  width: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Résultat de sortie :

Comment réaliser un trapèze en CSS3

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

html5 css css3 border

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment centrer les photos verticalement avec CSSArticle suivant：Comment centrer les photos verticalement avec CSS

Articles Liés

Voir plus