<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
2. سپس یک دیویژن با عنوان <div id="heart"></div> درون تگ body ایجاد کنید تا استایل را با استفاده از این کلاس فراخوانی کنیم .
<div id="heart"></div>
3. در مرحله بعدی یک تگ <style> بین تگ head ایجاد کرده و کدهای زیر را درون آن کپی کنید . من برای اینکه برای کاربران مبتدی این قسمت مبهم نباشد کل کد را تایپ می کنم .
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div id="heart"></div>
</body>
</html>
کد کلی به شکل زیر می باشد . کدهای مربوط به ایجاد شکل قلب در Css3 . سعی کنید اگر می خواهید این قسمت را به درستی متوجه شوید خط به خط کدها را تایپ کنید تا تاثیر هرخط کد را بهتر درک کنید .
<!DOCTYPE html>
<html>
<head>
<style>
#heart {
position: relative;
}
#heart:before, #heart:after {
position: absolute;
content: "";
left: 70px; top: 0;
width: 70px;
height: 115px;
background: blue;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-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;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
</style>
</head>
<body>
<div id="heart"></div>
</body>
</html>
دمو تمرین در مرورگر
