<!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 旋轉(zhuǎn)  translate平移  
				 ratate在前面：先旋轉(zhuǎn)后平移；translate在前面：先平移后旋轉(zhuǎn)
				 * */
				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>
					天長(zhǎng)<br />
					地久
				</span>
			</p>
		</div>
	</body>
</html>