<!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>
دمو تمرین در مرورگر