html怎么设置按钮形状六边形,带圆角的CSS六角形按钮
时间: 2024-01-21 13:16:11 浏览: 27
可以使用CSS3的transform属性和border-radius属性来实现带圆角的六边形按钮。
首先,可以设置按钮的宽高和圆角,然后使用transform: rotate(30deg),将按钮旋转30度,这样就可以得到六边形的形状。
接着,可以使用伪元素before和after分别创建左上和右上的三角形,并设置宽高、背景颜色和旋转角度,使其与六边形组合成为带圆角的六边形按钮。
以下是示例代码:
```
<style>
.hexagon {
width: 80px;
height: 46px;
background-color: #007bff;
border-radius: 10px;
position: relative;
overflow: hidden;
cursor: pointer;
transform: rotate(30deg);
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #007bff;
transform: skewY(60deg);
}
.hexagon:before {
left: -25%;
border-top-right-radius: 15px;
}
.hexagon:after {
left: 25%;
border-top-left-radius: 15px;
}
</style>
<div class="hexagon"></div>
```
在上述代码中,使用了类名为hexagon的div元素作为六边形按钮容器,并设置了宽高、背景颜色、圆角、位置和旋转角度。然后使用伪元素before和after创建左上和右上的三角形,并设置宽高、背景颜色和旋转角度,同时使用border-radius属性设置其带圆角的形状。
最后,将六边形按钮容器的overflow属性设置为hidden,使得伪元素超出容器部分不可见,并设置cursor属性为pointer,使鼠标悬停时显示手型光标。
运行上述代码,就可以得到一个带圆角的CSS六角形按钮。