Comment mettre div à cœur en CSS-tutoriel CSS-php.cn

Comment mettre div à cœur en CSS

藏色散人

Libérer： 2023-01-03 09:30:59

original

3462 Les gens l'ont consulté

Comment définir un div dans un cœur en utilisant CSS : créez d'abord un exemple de fichier HTML ; puis préparez un élément dom et attribuez son identifiant comme cœur, puis exploitez le pseudo-élément et enfin faites pivoter l'avant et l'après ; contenu. Dessinez-le simplement en forme de cœur.

Comment mettre div à cœur en CSS

L'environnement d'exploitation de cet article : système Windows7, version HTML5&&CSS3, ordinateur DELL G3

Utiliser CSS pour dessiner une forme de cœur

Des motifs en forme de cœur sont souvent rencontrés, tels que des likes et des disparités. La méthode d'utilisation précédente était l'accès aux images, qui étaient insérées dans le dom en tant que img ou backgroundImage. Maintenant, dessinez vous-même un motif en forme de cœur en utilisant CSS.

Forme de coeur

Préparez un élément dom comme suit, attribuez son identifiant comme coeur

<div id="heart"></div>

Copier après la connexion

Ajouter une largeur et une hauteur

#heart {
    position: relative;
    width:50px;
    height:40px;
}

Copier après la connexion

Maintenant, ce devrait être un rectangle d'une largeur de 50 px et d'une hauteur de 40 px. Il ne fonctionne plus. Commençons maintenant à utiliser le pseudo-élément

/*上一步骤的代码省略...*/
#heart:before,
#heart:after{
  position: absolute;
  left:0;
  top:0;
  content: &#39;&#39;;
  width: 25px;
  height: 40px;
  background: red;
  border-radius: 20px 20px 0 0;
}
#heart:after {
  content: &#39;&#39;;
  left: 25px;
  top:0
}

Copier après la connexion

emmm... La forme ne peut pas être décrite, regardons simplement l'image ci-dessus... La forme jusqu'à présent devrait ressembler à ceci.

Comment mettre div à cœur en CSS

La prochaine chose à faire est de faire pivoter le contenu avant et après. Le code est le suivant :

#heart:before,
#heart:after{
  position: absolute;
  left:25px;
  top:0;
  content: &#39;&#39;;
  width: 25px;
  height: 40px;
  background: red;
  border-radius: 40px 40px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
#heart:after {
  content: &#39;&#39;;
  left: 0;
  top:0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

Copier après la connexion

L'image ci-dessus...

Comment mettre div à cœur en CSS