Comment créer des effets étonnants avec des formes CSS

Sep 16, 2025

Comment

[dix] [dix] [dix]

[dix]

Les développeurs frontaux ont tendance à penser aux rectangles; Rectangles à l'intérieur des rectangles à l'intérieur des rectangles à l'intérieur des rectangles. Nous pourrions utiliser des tours avec des frontières pour créer des cercles ou des triangles, mais ils sont vraiment des boîtes rectangulaires déguisées. Eh bien, cela est sur le point de changer avec CSS Formes, un W3c Recommandation du candidat qui changera votre façon de penser.

[dix]

OFFRE DE NOËL: Économisez jusqu'à 47% sur un abonnement au magazine Net

Les formes CSS vous permettent de créer des formes géométriques à l'aide de fonctions de forme: cercle (), ellipsis (), inset () et polygone () et les appliquer à des éléments ou des effets tels que l'écrêtage et les filtres. De plus, les formes peuvent affecter le flux du contenu, vous permettant de envelopper le texte soigneusement autour des fonctionnalités telles que des avatars circulaires.

La fonction de forme la plus puissante est peut-être la polygone () car elle vous permet de créer des formes arbitraires complexes utilisant des points illimités définis à l'aide de paires coordonnées. Si vous avez utilisé Svg , cela vous sera familier.

Dans ce tutoriel, nous utiliserons des polygones avec la propriété Clip-Chemin pour couper une forme géométrique de notre texte de sorte que seule la zone enfermée dans le polygone soit visible. Nous ajouterons également des transitions simples pour apporter l'effet à la vie. Vous pouvez saisir le code pour chaque étape de ce repo de Github, ici .

01. Commencez par HTML

Tout d'abord, prenez notre HTML prêt. Nous avons juste besoin d'un & lt; div & gt; , notre .agrafe Classe et notre texte, mais comme nous utiliserons des pseudo-éléments pour cet effet, nous ajouterons également un attribut ayant la même valeur que le texte afin que nous puissions la lire dans le CSS plutôt que sur le codage dur.

[dix]

 & lt; Div Class = "Clip" Data-Content = "Une démo de coupure" & gt;
Une démo de coupure
& lt; / div et gt;

Ensuite, nous voulons le faire remplir l'écran et aligner le texte du Texte mort - nous pouvons utiliser certains Flexbox magie pour cela. Soyons aussi style et taille du texte.

 .Clip {
// Écran de remplissage
Position: absolu;
TOP: 0;
à gauche: 0;
largeur: 100%;
Hauteur: 100%;
// alignement
Affichage: flex; // utilise flex pour alignement
Justify-Content: Centre; // alignement horizontal
Align-items: centre; // alignement vertical
// Style de texte
Font-famille: "Travail sans", Arial, Helvetica, Sans Serif; // Work Sans est disponible chez Google Fonts
Poids de la police: 800;
Taille de la police: 8REM;
Texte-Aligner: Centre;
Texte-transformateur: majuscule;
}

02. Ajouter un style

Maintenant nous pouvons styler le ::avant que et ::après pseudo-éléments, avec chacun devenant une couche sur le dessus du texte. Par défaut, ::après aura le plus haut indice Z. La pratique attr () Le sélecteur lira la valeur de notre contenu de données attribut.

Les pseudo-éléments partageront les propriétés de position et de flexbox. Nous pouvons donc refroidir notre CSS légèrement et tirer parti de la puissance de SCSS pour garder notre style bien rangé. Le style de police sera hérité. Nous utilisons ... Pour désigner les propriétés que nous avons déjà couvertes.

 .Clip {
...
// Positionne auto (& amp;) et pseudo-éléments (avant / après)
& amp;
& amp; :: avant,
& amp; :: Après {
  Position: absolu;
  TOP: 0;
  à gauche: 0;
  largeur: 100%;
  Hauteur: 100%;
  Affichage: flex; // utilise Flex pour alignement
  Justify-Content: Centre; // alignement horizontal
  Align-items: centre; // alignement vertical
}
& amp; :: avant,
& amp; :: Après {
  Contenu: attr (contenu de données); // Utilise la valeur d'attribut comme contenu
}
}

Le résultat dans le navigateur doit avoir l'air identique, car les pseudo-éléments sont assis directement sur le texte. Vous pouvez modifier leurs styles dans Devtools pour voir comment ils sont superposés.

03. Définir des arrière-plans et des couleurs

Il est temps de donner à chaque couche une couleur et un fond de couleur différentes - allons chercher des couleurs audacieuses, sur tendance, que nous avons prédéfinies comme variables. Nous pouvons également forcer le texte à envelopper sur plusieurs lignes à l'aide d'un tour de rembourrage CSS plutôt que d'ajouter ceux-ci dans le HTML.

Ceci est utile car sinon nous devrions utiliser deux types de pauses de ligne: & lt; BR & GT; à l'intérieur de & lt; div & gt; et plus obscur \UNE dans l'attribut.

.agrafe {
...
& amp;
& amp; :: avant,
& amp; :: Après {
  rembourrage: 0 50%;
  Dimensionnement de la boîte: Border-Box;
}
& amp; :: avant {
  Couleur: $ blanc;
  Arrière-plan: $ rose;
}
& amp; :: Après {
  Couleur: $ rose;
  Contexte: $ bleu;
}
}

[dix]

L'astuce de rembourrage fonctionne en donnant le texte zéro largeur horizontale, forçant le navigateur pour envelopper chaque mot à une nouvelle ligne.

04. Clip le texte

Temps pour le bit intéressant - nous sommes prêts à commencer à couper notre texte. Nous allons créer un clip diagonal, découpant l'écran en deux triangles en bas à gauche en haut à droite.

Le ::avant que pseudo-élément ne sera visible que dans le triangle supérieur gauche, et ::après Le pseudo-élément ne sera visible que dans le triangle inférieur droit. Voici le code pour atteindre cela:

 .Clip {
...
& amp; :: avant {
  CLIP-PATH: Polygone (0 0, 100% 0, 0 100%, 0 100%);
}
& amp; :: Après {
  CLIP-PATH: Polygone (100% 0, 100% 100%, 0 100%, 100% 0);
}
}

Cela crée des polygones avec quatre points. Chaque point est décrit par une paire coordonnée; Simplement une valeur X (de gauche à droite) et Y (haut en bas). La valeur peut être absolue (par exemple: px) ou relatif (par exemple:%). Les points sont référencés en haut à gauche, donc les points à 100% 100% sont en bas à droite.

Imaginez des lignes reliant chacun des points dans l'ordre indiqué pour former les formes. Dans le ::avant que polygone il commence en haut à gauche (0 0) , se déplace à travers l'écran en haut à droite (100% 0) , puis en bas à gauche (0 100%) .

J'espère que vous verrez votre texte coupé maintenant. Redimensionnez le navigateur et vous verrez l'écrêtage réagissant en conséquence.

Si vous utilisez Chrome, vous verrez probablement quelques problèmes de repeindre lors du redimensionnement, causé par les couches composites de Chrome. Malheureusement, parce que la démo est plein écran, le recommandé va--changer: transformer propriété et Transformer: translatez (0) Le hack ne corrige pas cela. Cependant, si vous changez .agrafe à Position: fixe; Ça marche.

 Clip {
& amp;
& amp; :: avant,
& amp; :: Après {
  Position: fixe;
}
}

N'oubliez pas que Chrome essaie d'être utile, et cette solution de contournement aura un impact sur la performance. Assurez-vous de profiler les performances lorsque vous faites des choses comme celle-ci dans la production.

05. Ajouter des transitions

Maintenant que nous avons reçu notre texte coupé, mettons la vie de certaines transitions. La bonne nouvelle est que vous pouvez simplement transition le peluche propriété pour que le navigateur fait tout le travail acharné. Activons les transitions sur les pseudo-éléments, puis définissent quatre états différents à la transition entre.

État 1: C'est l'état initial, alors créons trois autres

Ajoutez chaque bloc au bas de votre CSS à votre guise. Vous pouvez donc voir à quoi cela ressemble.

État 2: Déplacez légèrement les triangles pour révéler le fond

Cela ressemblera un peu comme le drapeau de la République du Congo. Supprimer 20% de la pointe de chaque triangle polygone fera le tour.

Etat 3: Morph les triangles en rectangles

Ceci est similaire au tricolore français, en sens inverse.

Qu'en est-il de cette quatrième paire coordonnée? Eh bien, c'est là qu'il est utile. Il s'avère que la transition peluche Ne fonctionne que si la fonction de forme utilisée est la même (donc polygone et gt; polygone) et le nombre de points utilisés est identique - le navigateur transition chaque point individuel. C'est pourquoi nous avons ce quatrième point caché - cela nous permet de transmettre de manière transparente d'un triangle à un rectangle, nous révélons simplement que le quatrième point quand nous en avons besoin.

 .Clip {
& amp; :: avant {
  CLIP-PATH: Polygone (0 0, 40% 0, 40% 100%, 0 100%);
}
& amp; :: Après {
  CLIP-PATH: Polygone (100% 0, 100% 100%, 60% 100%, 60% 0);
}
}

État 4: Twist Ces polygones

S'agissant à notre thème du drapeau, cela ressemblerait à "j'ai besoin d'un remorqueur" dans le monde de la signalisation du drapeau maritime.

Ici, nous tordons les polygones afin qu'ils traversent le centre et forment deux triangles chacun. C'est lorsque les transitions peuvent vous aider à comprendre les paires coordonnées. En ralentissant vraiment la transition, vous pouvez voir comment chaque point se déplace sur l'écran à sa nouvelle position, et vous commencez à comprendre comment la commande des paires affecte la transition. Cela vous donne beaucoup de contrôle sur la transition.

.agrafe {
& amp; :: avant {
  CLIP-PATH: Polygone (100% 0, 0 0, 100% 100%, 0 100%);
}
& amp; :: Après {
  CLIP-PATH: Polygone (100% 0, 100% 100%, 0 0, 0 100%);
}
}

Emballer

Nous sommes tous définis mais nous ne sommes pas encore en mesure de changer les états, ce qui signifie que vous ne pouvez pas voir les transitions en action. Il y a plusieurs façons d'y parvenir, de sorte que c'est à vous de décider. Dans le repo et le Codepen, j'ai utilisé une solution sans javascript 100% avec des boutons radio cachés et le sélecteur de sodiblon général - jetez un coup d'oeil. Vous pouvez également consulter le codepen de ce tutoriel ici .

Cet article est apparu à l'origine dans le numéro 298 de rapporter , le magazine des concepteurs de sites Web et des développeurs professionnels - offrant les dernières tendances, technologies et techniques Web. Achetez le numéro 298 ici ou Abonnez-vous à Net ici .

Offre spéciale de Noël: Économisez jusqu'à 47% sur un abonnement au réseau Pour vous ou un ami pour Noël. C'est une offre limitée, alors déplacez-vous rapidement ...

Articles Liés:

28 exemples remarquables de CSS
Comment créer une présentation pyramide avec des formes CSS
Astuces CSS pour révolutionner vos mises en page Web

[dix] [dix]

[dix]

Comment créer des effets étonnants avec des formes CSS

01. Commencez par HTML

02. Ajouter un style

03. Définir des arrière-plans et des couleurs

04. Clip le texte

05. Ajouter des transitions

Emballer

Comment - Most Popular Articles

Comment tester des sites et des applications réagissants

Comment dessiner un lion

Créer un effet de fond de parallaxe contrôlé par la souris

Comment peindre l'art d'animation colorée dans Photoshop

Comment créer une compétence alexa pour votre site

Comment amener un personnage 2D à la vie en VR

Créer des encres mélangées avec InDesign

Aiguisez vos compétences de peinture nature morte

Catégories