Maison > Article > interface Web > Comment utiliser CSS pour se rendre compte qu'il manque un coin à un div
Comment utiliser CSS pour se rendre compte qu'il manque un coin à un div
- 藏色散人original
- 2023-01-30 09:23:392573parcourir
Méthode CSS pour réaliser qu'il manque un coin à un div : 1. Créez un exemple de fichier HTML et définissez un div ; 2. Définissez la couleur d'arrière-plan de la largeur et de la hauteur du div 3. Ajoutez une pseudo-classe au div dont vous avez besoin ; pour supprimer un coin et ajouter la pseudo-classe au div. Définissez-le sur la même couleur que la couleur d'arrière-plan, puis faites-le pivoter de 45 degrés, puis positionnez-le sur le coin qui doit être supprimé.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version HTML5&&CSS3, ordinateur DELL G3
Comment utiliser le CSS pour réaliser un div manquant un coin
css pour réaliser un div manquant un coin ?
Créez d'abord un div et définissez-le. Après avoir défini la couleur d'arrière-plan de la largeur et de la hauteur, ajoutez une pseudo-classe au div qui doit supprimer un coin, définissez la pseudo-classe sur la même couleur que la couleur d'arrière-plan, puis faites pivoter 45 degrés, activez le positionnement et localisez le coin qui doit être supprimé (en fait, couvrez simplement ce coin)
<body>
<div class="box"></div>
</body>.box {
position: relative;
width: 200px;
height: 200px;
background-image: linear-gradient(90deg, #333333, #666666, #999999);
overflow: hidden;
&::before {
position: absolute;
content: "";
width: 100px;
height: 100px;
right: -50px;
top: -50px;
z-index: 100;
background-color: #ffffff;
transform: rotateZ(45deg);
}
}Rendu :
Apprentissage recommandé : "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!