首页写一个html的爱心代码

写一个html的爱心代码

时间: 2023-10-26 11:34:05 浏览: 43

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>爱心</title> </head> <body> <div style="width: 100px; height: 100px; position: relative;"> <div style="width: 50px; height: 80px; position: absolute; top: 0; left: 25px; background-color: red; transform: rotate(-45deg);"></div> <div style="width: 50px; height: 80px; position: absolute; top: 0; left: 25px; background-color: red; transform: rotate(45deg);"></div> </div> </body> </html>

写一个html爱心代码

<!DOCTYPE html> <html> <head> <title>爱心</title> <style type="text/css"> .heart { position: relative; width: 50px; height: 50px; transform: rotate(45deg); background-color: #f00; margin: 50px auto; } .heart:before, .heart:after { content: ""; position: absolute; background-color: inherit; } .heart:before { top: -25px; left: 0; width: 25px; height: 25px; border-radius: 25px 0 0 0; } .heart:after { top: 0; left: -25px; width: 25px; height: 25px; border-radius: 0 25px 0 0; } </style> </head> <body> <div class="heart"></div> </body> </html>

帮我写一个HTML爱心代码

好的，以下是HTML爱心代码： ```html <!DOCTYPE html> <html> <head> <title>HTML爱心代码</title> <style> .heart { position: relative; width: 100px; height: 90px; transform: rotate(-45deg); margin: 50px; } .heart:before, .heart:after { content: ""; position: absolute; background-color: red; border-radius: 50px 50px ; } .heart:before { width: 50px; height: 50px; top: -25px; left: ; } .heart:after { width: 50px; height: 50px; top: ; left: 25px; } </style> </head> <body> <div class="heart"></div> </body> </html> ``` 希望对您有帮助！

阅读全文