<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>爱心制作</title>
<style type="text/css">
div{
margin: 0 auto;
text-align: center;
font-family: "微软雅黑";
font-size: 30px;
color: purple;
padding: ;
}
#one{
width: 100px;
height: 150px;
background: red;
/*左上 右上 右下 左下*/
border-radius: 50px 50px 0 0;
/*rotate 旋转 translate平移
ratate在前面：先旋转后平移；translate在前面：先平移后旋转
* */
transform: rotate(-45deg) translateX(-83px) translateY(31px);
}
#two{
width: 100px;
height: 150px;
background: red;
border-radius:50px 50px 0 0;
transform: rotate(45deg) translateX(-50px) translateY(-50px);
}
span{
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div id="one">
一生
</div>
<div id="two">
一世<br />
<p>
<span>
天长<br />
地久
</span>
</p>
</div>
</body>
</html>
