html中怎么写正六边形,利用css3书写正6边形
时间: 2024-04-29 19:21:55 浏览: 5
可以使用CSS3的`transform`属性和`::before`和`::after`伪元素来实现正六边形。
HTML代码:
```html
<div class="hexagon"></div>
```
CSS代码:
```css
.hexagon {
width: 100px;
height: 55px;
position: relative;
background-color: #f00;
margin: 50px auto;
transform: rotate(30deg);
}
.hexagon::before,
.hexagon::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: inherit;
transform: rotate(60deg);
}
.hexagon::before {
transform: rotate(-60deg);
top: -27.5px;
}
.hexagon::after {
transform: rotate(120deg);
bottom: -27.5px;
}
```
代码说明:
1. 首先设置`.hexagon`元素的宽度和高度,以及背景颜色和位置等样式。
2. 使用`transform: rotate(30deg)`将正六边形旋转30度,这是为了后面设置伪元素时能够正常旋转。
3. 使用`::before`和`::after`伪元素分别生成两个正三角形,宽度和高度与`.hexagon`元素相同,颜色也与其相同。
4. 使用`transform: rotate(60deg)`将正三角形旋转60度,从而让其成为正六边形的一条边。
5. 对于`::before`伪元素,使用`transform: rotate(-60deg)`将其旋转-60度,并设置`top: -27.5px`,从而让其位于正六边形的顶点之一。
6. 对于`::after`伪元素,使用`transform: rotate(120deg)`将其旋转120度,并设置`bottom: -27.5px`,从而让其位于正六边形的顶点之一。
7. 最终就可以得到一个正六边形。