Maison >interface Web >tutoriel CSS >Comment obtenir un effet losange qui n'est pas un angle droit en CSS3
Comment obtenir un effet losange qui n'est pas un angle droit en CSS3
- WBOYoriginal
- 2021-12-08 14:37:341694parcourir
En CSS, vous pouvez utiliser l'attribut "clip-path" pour obtenir un effet losange qui n'est pas un angle droit. Cet attribut peut recadrer la zone d'affichage de l'élément. Il vous suffit de recadrer la zone d'affichage de . l'élément dans un losange. La syntaxe est "clip-path:polygon" (50% 0,100% 50%,50% 100%,0 50%);".
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment obtenir un effet losange qui n'est pas un angle droit en CSS3
En CSS, vous pouvez utiliser l'attribut clip-path pour créer la zone affichable de l'élément à l'aide du recadrage. Les parties situées dans la zone sont affichées et les parties situées en dehors de la zone sont masquées.
Utilisez cet attribut pour recadrer l'élément en forme de losange. 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>
.imgClip{
clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
}
</style>
</head>
<body>
<img class="imgClip" src="1118.02.png" alt="">
</body>
</html>Résultat 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!