首页我需要三角形风车图形制作的CSS代码

我需要三角形风车图形制作的CSS代码

时间: 2024-09-22 07:06:58 浏览: 40

你可以使用CSS的伪元素 `::before` 和 `::after` 创建一个简单的三角形风车效果。下面是一个基础的示例，假设风车有三个叶片： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .windmill { width: 0; height: 0; position: relative; } .windmill-blade { content: ""; position: absolute; } .windmill-blade:first-child { top: 50%; left: 50%; transform-origin: bottom center; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; /* 叶片颜色 */ } .windmill-blade:nth-child(2) { top: 50%; left: calc(50% - 50px); transform-origin: top center; border-top: 50px solid transparent; border-bottom: 100px solid red; } .windmill-blade:last-child { top: 50%; left: calc(50% + 50px); transform-origin: bottom center; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; } </style> </head> <body> <div class="windmill"> <div class="windmill-blade"></div> <div class="windmill-blade"></div> <div class="windmill-blade"></div> </div> </body> </html> ``` 在这个例子中，每个 `.windmill-blade` 类代表风车的一个叶片。每个叶片通过调整边框的样式（左右透明、上下实色）来形成三角形。

阅读全文