[分享]css六边形按钮

CSS六边形按钮的制作方法

/* HTML代码 */
<button class="hex-btn">点击</button>

/* CSS代码 */
.hex-btn {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 58px;
  border: none;
  background-color: #0077cc;
  color: #fff;
  font-size:16px;
  text-align: center;
  line-height: 58px;
  cursor: pointer;
}

.hex-btn:before, .hex-btn:after {
  content: "";
  position: absolute;
  bottom: -29px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

.hex-btn:before {
  border-bottom: 29px solid #0077cc;
  left: 0;
}

.hex-btn:after {
  border-top: 29px solid #0077cc;
  right: 0;
} 

解释

1. 使用position:relative使按钮变为相对定位，以便于其后的伪元素{
2. 设置按钮的宽高、背景色、字体大小、字体颜色等属性{
3. 设置按钮的伪元素，使用绝对定位，保证元素的位置与按钮位置一致{
4. 设置伪元素的样式，根据伪元素的方向和尺寸使用border定义形状{
}

总结

通过border属性可以定义出六边形的形状，结合伪元素可以制作六边形的样式。在按钮中，需使用position:relative才能使伪元素相对于按钮位置设置样式，否则伪元素位置会与按钮位置不匹配。