红心html 制作,5分钟Html 画个心

原理：两个div，一个左旋转 一个右旋转或左旋转后镜像，分别圆角一半

红心

*{

padding: 0px;

margin: 0px;

}

.box{

position:relative;

width: 200px;

height: 300px;

background-color: #fff;

margin: 100px auto;

}

.uai,.hh{

position: absolute;

left: 0px;

top: 0px;

width: 200px;

height: 300px;

background-color:red;

border-radius:100px 100px 0 0;

transform: rotate(-45deg);

color: white;

line-height: 100px;

text-align: center;

font-size:30px;

}

.hh{

transform: rotate(45deg) translateX(50px) translateY(-50px);

}

Uai

HH