Crie um “Coração” usando CSS

Criar um coração em CSS é uma ideia um pouco avançada, difícil de entender. É apenas um coração morto.

Parte HTML

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

Parte CSS

                        #heart {
position
: relative;
left
: 80px;
height
: 130px;
width
:140px;
}

#heart:before, #heart:after {
position
: absolute;
content
: "";
left
: 70px;
top
: 0;
width
: 70px;
height
: 120px;
background
-color:#056;
/*border-radius*/
-webkit-border-radius: 50px 50px 0 0;
-moz-border-radius: 50px 50px 0 0;
border
-radius: 50px 50px 0 0;
/*transform*/
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform
: rotate(-45deg);
/*transform-origin*/
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform
-origin: 0 100%;
}

#heart:after {
left
: 0;
/*transform*/
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform
: rotate(45deg);
/*transform-origin*/
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform
-origin: 100% 100%;
}

fonte: <a href=” http://topgravity.com/”> Gravidade superior </a>