首页css 画个向上的三角形

css 画个向上的三角形

时间: 2023-10-21 12:21:04 浏览: 95

用css画三角形

用纯css绘制三角形，不是用图片

要用CSS画一个向上的三角形，可以使用CSS的border属性来实现。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <style> .triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } </style> </head> <body> <div class="triangle-up"></div> </body> </html> ``` 在上面的代码中，我们创建了一个CSS类 `.triangle-up`，通过设置 `border` 属性来绘制三角形。 `border-left` 和 `border-right` 设置为相同的宽度 (50px) 并透明， `border-bottom` 设置为红色且高度为100px。将上述代码复制到一个 HTML 文件中打开，你将能看到一个向上的红色三角形。你可以更改 `.triangle-up` 类的样式以适应你的需求。

阅读全文