How to draw a Heart by CSS

This article mainly introduces the relevant knowledge of "how to draw a heart in CSS". The editor shows you the operation process through an actual case. The operation method is simple and fast, and it is practical. I hope this article "how to draw a heart in CSS" can help you solve the problem.

Specific code:

CSS draw Heart-(yisu.com) # heart {position: relative; width: 100px; height: 200px;} # heart:before,#heart:after {position: absolute; content: "; left: 100px; top: 0; width: 100px; height: 160px; background: red;-moz-border-radius: 50px 50px 00; border-radius: 50px 50px 00;-webkit-transform: rotate (- 50deg) / * transform:rotate rotates around an axis in a given degree * /-moz-transform: rotate (- 50deg);-ms-transform: rotate (- 50deg);-o-transform: rotate (- 50deg); transform:rotate (- 50deg);-webkit-transform-origin: 0100% 50deg * allows you to change the position of the converted element * /-moz-transform-origin: 0100% -ms-transform-origin: 0 100%;-o-transform-origin: 0 100%; transform-origin: 0 100%;} # heart:after {left: 0;-webkit-transform: rotate (50deg);-moz-transform: rotate (50deg);-ms-transform: rotate (50deg);-o-transform: rotate (50deg); transform: rotate (50deg) -webkit-transform-origin: 100% 100%;-moz-transform-origin: 100% 100%;-ms-transform-origin: 100% 100%;-o-transform-origin: 100% 100%; transform-origin: 100% 100%;} this is the end of the introduction to "how CSS draws a heart". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.