首页在HTML5和css3中绘制一个⭐和一个△，给出完整代码

在HTML5和css3中绘制一个⭐和一个△，给出完整代码

时间: 2024-10-16 21:10:30 浏览: 32

在HTML5和CSS3中，我们可以利用伪元素（`:before` 和 `:after`) 和一些基本的SVG图标来创建星形（⭐）和三角形（△）。这里是一个简单的例子：首先，你需要将SVG图标插入到HTML文件中： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> /* CSS部分 */ .star { display: inline-block; width: 40px; height: 40px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23fff'/%3E%3C/svg%3E"); } .triangle { position: relative; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red; } </style> </head> <body>  <div class="star">⭐</div>  <div class="triangle"></div> </body> </html> ``` 注意：在实际项目中，SVG路径可能会更复杂，上述代码中的SVG路径只是一个简化版本，可以自行替换为完整的五角星和等边三角形的SVG路径。

阅读全文