绘制一个红心
2017-07-18 本文已影响0人
qhaobaba
<html>
<head>
<title></title>
</head>
<style type="text/css">
#Heart {
position: relative;
width: 100%;
height: 90px;
}
#Heart:before,
#Heart:after {
content: "";
position: absolute;
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #FE4C40;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#Heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
</style>
<body>
<div id="Heart"></div>
</body>
</html>
