Comment créer des formes de base et avancées avec du CSS pur

Avez-vous déjà vu un site Web purement CSS où chaque élément est terminé via CSS? CSS fait plus que simplement styliser des éléments. Les formes CSS permettent aux concepteurs de sites Web de créer des chemins personnalisés comme un triangle, des cercles, des polygones, etc. De cette façon, vous n'êtes plus contraint d'insérer une image flottante avec un fond transparent, pour être déçu par un cadre rectangulaire autour d'elle.

Dans cet article, nous utiliserons des formes CSS et quelques valeurs fonctionnelles pour coder différentes formes.

Dessiner des formes CSS de base

Commençons par les formes de base comme le carré, le rectangle, le triangle, le cercle et l'ellipse.

Carré et rectangle

Le carré et le rectangle sont les formes les plus faciles à créer en CSS. Tout ce que vous avez à faire est de créer un et donnez-lui un la taille et un largeur.

HTML

CSS

.rec-sq {
affichage: flexible ;
écart: 2em ;
marge: 2em ;
}
.carré {
largeur: 15 rem ;
hauteur: 15 rem ;
arrière-plan: rgb (255, 123, 0);
}
.rectangle {
largeur: 24rem;
hauteur: 14rem;
fond: rvb (0, 119, 128) ;
}

Sortir:

Cercle et Ellipse

Il vous suffit d'attribuer un rayon-frontière de 50% à un carré et vous obtiendrez un cercle. Faites de même avec le rectangle pour obtenir une ellipse.

HTML

CSS

.cercle {
largeur: 15 rem ;
hauteur: 15 rem ;
arrière-plan: rgb (255, 123, 0);
rayon de bordure: 50 % ;
}
.ellipse {
largeur: 24rem;
hauteur: 14rem;
fond: rvb (0, 119, 128) ;
rayon de bordure: 50 % ;
}

Sortir:

Triangles

Nous utiliserons des bordures pour créer des triangles. Vous vous demandez comment ça marche? Tout ce que vous avez à faire est de régler le largeur et la taille du triangle à zéro. Cela signifie, en allant de l'avant, le largeur réelle de l'élément sera le largeur de la bordure. En outre, vous savez peut-être déjà que les bords de la bordure sont en diagonale de 45 degrés les uns par rapport aux autres. Donnez des couleurs différentes à chaque bordure et définissez trois d'entre elles sur transparentes. En fin de compte, vous aurez votre triangle.

HTML

CSS

//commun à tous
corps {
affichage: flexible ;
écart: 5em ;
marge: 15em ;
}.échantillon {
hauteur: 8.5em ;
largeur: 8.5em ;
bordure supérieure: 1 em solide #9ee780 ;
bordure droite: 1em solide rgb (240, 241, 141) ;
bordure inférieure: 1em solide rgb (145, 236, 252) ;
bordure gauche: 1em solide rgb (248, 115, 106 );
}.Triangle {
hauteur: 0 ;
largeur: 0 ;
bordure supérieure: 5 em solide #9ee780 ;
bordure droite: 5em rgb solide (240, 241, 141) ;
bordure inférieure: 5em rgb solide (145, 236, 252) ;
bordure gauche: 5em solide rgb (248, 115, 106 );
}

Sortir:

Vous pouvez jouer avec la taille et couleur de la bordure pour obtenir différents types de triangles. Par exemple, vous pouvez créer un triangle pointant vers le haut en donnant à la Bordure du bas une couleur unie tandis que toutes les autres bordures sont définies sur transparentes. De plus, vous pouvez créer un triangle pointant dans la bonne direction ou un triangle rectangle en jouant avec largeur de la bordure et couleur de la bordure.

HTML

CSS

.triangle-up {
hauteur: 0 ;
largeur: 0 ;
bordure supérieure: 5 em solide transparent ;
bordure droite: 5 em solide transparent ;
bordure inférieure: 5em rgb solide (145, 236, 252) ;
bordure gauche: 5 em solide transparent ;
}
.triangle-droit {
largeur: 0 ;
hauteur: 0 ;
border-style: solide ;
largeur de bordure: 4em 0 4em 8em;
border-color: transparent transparent transparent rvb (245, 149, 221) ;
}
.triangle-bas-droit {
largeur: 0 ;
hauteur: 0 ;
border-style: solide ;
border-width: 8em 0 0 8em;
border-color: transparent transparent transparent rvb (151, 235, 158) ;
}

Sortir:

Création de formes avancées à l'aide de CSS

Vous pouvez utiliser ::avant et ::aprèspseudo-éléments pour créer des formes avancées. Grâce à l'utilisation intelligente des propriétés de position et de transformation, vous pouvez facilement créer des formes complexes à l'aide de CSS pur.

Forme d'étoile (5 points)

Vous devrez manipuler les bordures à l'aide de la valeur de rotation de la transformation. L'idée est de créer deux côtés à l'aide d'un classe="étoile", les deux autres côtés utilisant le ::après élément, et le dernier côté en utilisant le ::avant élément.

HTML

CSS

.star-cinq {
marge: 3.125em 0 ;
position: relative ;
bloc de visualisation;
largeur: 0em ;
hauteur: 0em ;
bordure droite: 6,25 em solide transparent ;
bordure inférieure: 4,3 em rgb solide (255, 174, 81);
bordure gauche: 6,25 em solide transparent ;
transformer: faire pivoter (35 degrés);
}
.star-five: avant {
bordure inférieure: 5em rgb solide (255, 174, 81);
bordure gauche: 2 em solide transparent ;
bordure droite: 1,875 em solide transparent ;
position: absolue ;
hauteur: 0 ;
largeur: 0 ;
haut: -45px ;
gauche: -65px ;
bloc de visualisation;
teneur: '';
transformer: rotation (-35 deg);
}
.star-five: après {
position: absolue ;
bloc de visualisation;
haut: 3px ;
à gauche: -105 pixels ;
largeur: 0 ;
hauteur: 0 ;
bordure droite: 6,25 em solide transparent ;
bordure inférieure: 4,3 em rgb solide (255, 174, 81);
bordure gauche: 5,95 em solide transparent ;
transformer: rotation (-70 degrés);
teneur: '';
}

Sortir:

Pentagone

Vous pouvez créer un pentagone en combinant un trapèze et un triangle. Utilisation frontière et propriétés de position formez-les et regroupez-les.

HTML

CSS

.pentagone {
position: relative ;
largeur: 10em ;
dimensionnement de la boîte: boîte de contenu ;
border-width: 10em 5em 0;
border-style: solide ;
border-color: rgb (7, 185, 255) transparent ;
marge supérieure: 20 rem ;
marge-gauche: 10rem ;
}
.pentagone: avant {
teneur: "";
position: absolue ;
hauteur: 0 ;
largeur: 0 ;
haut: -18em ;
gauche: -5em ;
largeur de bordure: 0 10em 8em ;
border-style: solide ;
border-color: rgb transparent transparent (7, 185, 255) ;
}

Sortir:

diamant

Groupez deux triangles pointant vers le haut et vers le bas en utilisant la position pour créer une forme de losange. Oui, nous utiliserons le frontière propriétés pour créer ces triangles.

HTML

CSS

.diamant {
largeur: 0 ;
hauteur: 0 ;
position: relative ;
haut: -3em ;
bordure: 3em solide transparent ;
border-bottom-color: rgb (129, 230, 255 );
}
.diamant: après {
teneur: '';
largeur: 0 ;
hauteur: 0 ;
position: absolue ;
gauche: -3em ;
haut: 3em ;
bordure: 3em solide transparent ;
border-top-color: rgb (129, 230, 255) ;
}

Sortir:

Vous pouvez créer une forme de bouclier en diamant en modifiant la hauteur du triangle supérieur comme indiqué ci-dessous:

HTML

CSS

.diamond-bouclier
{
largeur: 0 ;
hauteur: 0 ;
bordure: 3em solide transparent ;
bordure inférieure: 1,25 em rgb solide (71, 194, 231) ;
position: relative ;
haut: -3em ;
}
.diamond-cut: après {
teneur: '';
position: absolue ;
gauche: -3em ;
haut: 1,25 em ;
largeur: 0 ;
hauteur: 0 ;
bordure: 3em solide transparent ;
bordure supérieure: 4,4 em rgb solide (71, 194, 231) ;
}

Sortir:

Cœur

La forme du cœur est un peu dure mais vous pouvez le faire en utilisant ::avant et ::après pseudo-éléments. Vous pouvez utiliser différentes valeurs de transformer pour les faire pivoter sous différents angles jusqu'à ce qu'ils forment parfaitement une forme de cœur. En fin de compte, vous pouvez définir transformer-origine pour définir le point autour duquel la transformation est appliquée.

HTML

CSS

.cœur {
largeur: 6.25em ;
hauteur: 55em ;
position: relative ;
}
.coeur: avant,
.coeur: après {
teneur: "";
largeur: 3em ;
hauteur: 5em;
position: absolue ;
à gauche: 3em ;
haut: 0 ;
fond: rouge ;
rayon de bordure: 3em 3em 0 0 ;
transformer: rotation (-45 degrés);
origine de la transformation: 0 100 % ;
}
.coeur: après {
à gauche: 0 ;
transformer: faire pivoter (45 degrés);
origine de la transformation: 100 % 100 % ;
}

Sortir:

Expérimentez avec des formes CSS pures

Vous devriez maintenant être familiarisé avec les différentes images CSS pures qui peuvent être construites en écrivant quelques lignes de code. Construire un site Web ultra-rapide n'est plus une tâche trépidante car vous savez comment jouer avec le code. La meilleure partie est que vous pouvez résonner avec la voix de la marque en manipulant différentes formes et couleurs selon vos besoins. Par conséquent, continuez à expérimenter et découvrez de nouvelles façons de dessiner des formes impressionnantes uniquement par CSS.

Comment créer une barre de navigation réactive en utilisant HTML et CSS

Appel à tous les développeurs Web débutants: ce didacticiel vous donnera les compétences dont vous avez besoin pour créer vos propres barres de navigation réactives en utilisant uniquement HTML et CSS !

Lire la suite

A propos de l'auteur