首页H5画一个高4px 宽10px的三角形

H5画一个高4px 宽10px的三角形

时间: 2024-10-25 17:18:35 浏览: 18

你可以使用CSS的伪元素 `::before` 和 `::after` 来创建一个简单的三角形。这里是一个例子，创建一个底边4像素、高10像素的向上指的三角形： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .triangle { position: relative; width: 0; /* 被父容器撑开 */ height: 0; /* 省略高度不影响布局 */ border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 10px solid red; /* 三角形颜色 */ } .triangle::before, .triangle::after { content: ""; position: absolute; top: calc(100% - 4px); /* 计算三角形上边缘到元素顶部的距离 */ } .triangle::before { left: 50%; /* 将三角形左移一半宽度 */ margin-left: -2px; /* 减去边框宽度的一半，保持对称 */ } .triangle::after { right: 50%; transform: rotate(180deg); /* 另一边也做同样的旋转 */ } </style> </head> <body> <div class="triangle"></div> </body> </html> ``` 在这个HTML中，`.triangle` 类定义了一个三角形。`::before` 和 `::after` 创建了两个隐藏的伪元素，它们通过负的左边距和右边距以及旋转来形成三角形。

阅读全文