How to set div to heart in css

How to set a div into a heart in css: first create an HTML sample file; then prepare a dom element and assign its id to heart; then operate the pseudo-element; and finally rotate the before and after contents. Just draw it in a heart shape.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, DELL G3 computer

Use css to draw a heart shape

Heart-shaped patterns are often encountered, such as the usage scenarios of liking and canceling likes. The previous method of use was image access, which was inserted into the dom as img or backgroundImage. Now draw a heart-shaped pattern by yourself using css.

Heart shape

Prepare a dom element as follows, assign its id as heart

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

Add width and height

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

Now It should be a rectangle with a width of 50px and a height of 40px. It is not running anymore. Now let’s start operating the pseudo-elements

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

emmm... The shape cannot be described, let’s just look at the picture above... The shape so far should look like this.

The next thing to do is to rotate the before and after content. The code is as follows:

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

The picture above...

[Recommended learning: css video tutorial]

The above is the detailed content of How to set div to heart in css. For more information, please follow other related articles on the PHP Chinese website!