Comment créer une forme de coeur avec CSS

élément comme le fondement de notre forme de coeur.

Ensuite, nous en faisons un carré en spécifiant la largeur et la hauteur de manière égale. Choisissez une couleur d'arrière-plan que vous aimez.

 .heart-shape {position: relative; largeur: 200px; hauteur: 200px; couleur de fond: rgba (250, 184, 66, 0, 8); } 

Ensuite, nous allons faire les cercles.

Plutôt que d'ajouter de nouveaux éléments, nous utiliserons les pseudo-éléments :before et :after . Nous avons d'abord mis les :before pseudo-éléments comme notre premier cercle. Nous en faisons un carré de taille et de largeur égales à celles de la div. Nous le transformons ensuite en cercle en lui donnant un rayon de bordure de 50% et le mettons sur le côté gauche du carré.

 .heart-shape: avant {position: absolue; en bas: 0px; gauche: -100px; largeur: 200px; hauteur: 200px; contenu: ''; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; couleur de fond: rgba (250, 184, 66, 0, 8); } 

Ensemble avec le carré nous aurons un résultat comme ceci:

Après cela, nous créons le deuxième cercle avec le pseudo-élément :after avec les mêmes styles que le premier cercle que nous avons créé. Ensuite, nous le positionnons également sur le haut du carré.

 .heart-shape: après {position: absolue; haut: -100px; droite: 0px; largeur: 200px; hauteur: 200px; contenu: ''; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; couleur de fond: rgba (250, 184, 66, 0, 8); } 

Les résultats sont les suivants:

Nous pouvons combiner ces deux mêmes styles en regroupant les sélecteurs de pseudo-éléments comme suit:

 .heart-shape: avant, .heart-shape: après {position: absolue; largeur: 200px; hauteur: 200px; contenu: ''; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; couleur de fond: rgba (250, 184, 66, 0, 8); } .heart-shape: avant {bas: 0px; gauche: -100px; } .heart-shape: après {top: -100px; droite: 0px; } 

Ta-da! Nous avons une forme de cœur, même si ce n'est pas encore dans la bonne direction. Pour le redresser, nous utiliserons la transformation CSS3.

La transformation peut être donnée aux principaux éléments de forme; ici, cela signifie le carré. Une fois transformé, le pseudo-élément changera automatiquement sa position après l'élément principal.

Ici, nous allons faire pivoter le cœur afin qu'il soit vu "debout".

 .heart-shape {-webkit-transform: tourne (45deg); -moz-transform: faire pivoter (45deg); -ms-transform: rotation (45deg); -o-transform: rotation (45deg); transformer: tourner (45deg); } 

Et voici à quoi ressemble notre cœur maintenant.

Le résultat:

Le code complet de la forme de coeur ci-dessus est comme suit, en HTML:

Et sur notre CSS, ce sera comme ça:

 .heart-shape {position: relative; largeur: 200px; hauteur: 200px; -webkit-transform: rotation (45deg); -moz-transform: faire pivoter (45deg); -ms-transform: rotation (45deg); -o-transform: rotation (45deg); transformer: tourner (45deg); couleur de fond: rgba (250, 184, 66, 1); } .heart-shape: avant, .heart-shape: après {position: absolute; largeur: 200px; hauteur: 200px; contenu: ''; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; couleur de fond: rgba (250, 184, 66, 1); } .heart-shape: avant {bas: 0px; gauche: -100px; } .heart-shape: après {top: -100px; droite: 0px; } 

Notez que nous avons maintenant mis le canal alpha de la rgba(250, 184, 66, 1) en arrière-plan à 1 pour supprimer la transparence. Maintenant c'est ce que notre coeur a l'air.

Maintenant que nous avons une forme de coeur parfaite, nous pouvons remplacer le fond à une autre couleur (par exemple rose ou rouge) avec facilité. Le seul inconvénient ici est que nous ne pouvions pas ajouter une bordure à la forme en raison des éléments empilés. L'ajout d'une ligne de bordure rendra le cœur bizarre.

Conclusion

Avec CSS3 créer une forme comme une forme de coeur est maintenant facilement réalisable. La propriété border-radius nous permet de faire des éléments ou même un pseudo-élément dans un cercle . Avec la transformation CSS3, nous pouvons facilement faire pivoter ou déplacer les coordonnées de l'objet .

Vous n'êtes limité que par votre créativité et votre imagination!