Maison > Article > interface Web > Créez une image d'arrière-plan triangulaire sympa en utilisant CSS3

Créez une image d'arrière-plan triangulaire sympa en utilisant CSS3

青灯夜游original: 2021-08-20 17:10:332461parcourir

Comment rendre votre page web plus accrocheuse et plus haut de gamme ? Un beau fond est indispensable ! L'article suivant partagera une petite astuce sur l'utilisation de CSS3 pour créer de superbes images d'arrière-plan triangulaires, afin que votre page Web soit à la fois belle et pratique ~

Comme le titre l'indique, aujourd'hui, nous allons principalement vous montrer comment utiliser CSS3 pour créer un arrière-plan sympa. images. La méthode de l'arrière-plan triangulaire est utile lorsque nous souhaitons afficher des options complètement différentes, telles que le jour et la nuit ou l'hiver et l'été.

Commençons directement par le code :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
  margin: 0;
  padding: 0;
}

div {
  position: absolute;
  height: 100vh;
  width: 100vw;
}

.day {
  background-image: url("https://img.php.cn/upload/article/000/000/024/611f69e8a300f34Créez une image darrière-plan triangulaire sympa en utilisant CSS3");
  background-size: cover;
  background-repeat: no-repeat;
}

.night {
  background-image: url("https://img.php.cn/upload/article/000/000/024/611f6a067f909111.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
}
</style>
</head>
<body>
  <div class="day"></div>
  <div class="night"></div>
</body>
</script>
</body>
</html>

L'effet est le suivant :

Créez une image darrière-plan triangulaire sympa en utilisant CSS3

Que diriez-vous ! L'effet n'est-il pas génial !

Analysons le code ci-dessus :

Créez d'abord deux divs

<body>
  <div class="day"></div>
  <div class="night"></div>
</body>

Utilisez ensuite l'attribut background-image pour ajouter des images d'arrière-plan à ces deux div respectivement. L'attribut background-size pour définir la taille de l'image et l'attribut background-repeat pour définir la mosaïque non répétée.
background-image属性添加背景图片，并使用background-size属性设置图片大小、background-repeat属性设置不重复平铺。
- background-size指定背景图片大小，当值设置为“cover”时，将保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
最后给第二个div使用clip-path

background-size spécifie la taille de l'image d'arrière-plan Lorsque la valeur est définie sur "cover", le rapport hauteur/largeur de l'image sera conservé et l'image sera. mis à l’échelle pour couvrir complètement la zone de positionnement d’arrière-plan.

Enfin, utilisez l'attribut clip-path pour dessiner un triangle pour le deuxième div.

 clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);

clip-path est un nouvel attribut de CSS3, qui signifie chemin de détourage, nous permettant de générer facilement diverses figures géométriques. clip-path obtient les graphiques souhaités en définissant un chemin spécial. Et ce chemin est exactement le chemin en SVG.

🎜🎜Fonction polygon() : utilisée pour définir un polygone et peut également être utilisée pour découper des graphiques. Ses paramètres sont un ensemble de paires de coordonnées (

), chaque paire de coordonnées représente les coordonnées d'un sommet du polygone. Le navigateur connectera le dernier sommet au premier sommet pour former un polygone fermé. Les paires de coordonnées sont séparées par des virgules et peuvent utiliser des valeurs unitaires absolues ou en pourcentage. 🎜🎜🎜🎜La plate-forme de site Web chinois PHP propose de nombreuses ressources pédagogiques vidéo. Bienvenue à tous pour apprendre le "🎜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!

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：Apprenez étape par étape à utiliser CSS pour ajouter des effets de flamme au texte (explication détaillée du code)Article suivant：Apprenez étape par étape à utiliser CSS pour ajouter des effets de flamme au texte (explication détaillée du code)

Articles Liés

Voir plus