[分享]Css两个按钮中间斜杠

CSS中常见的一种按钮设计就是两个按钮之间有一个斜杠的分隔线，这种设计风格也叫做多选按钮或者分割按钮。这种设计不仅能够起到美观的作用，同时也提高了用户交互体验。/CSS代码/ .btn { paddi...

CSS中常见的一种按钮设计就是两个按钮之间有一个斜杠的分隔线，这种设计风格也叫做多选按钮或者分割按钮。这种设计不仅能够起到美观的作用，同时也提高了用户交互体验。

/*CSS代码*/
.btn {
  padding: 10px 15px;
  border: 1px solid #ccc;
  font-size: 16px;
  background: #f2f2f2;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.btn:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  transform: skewX(30deg);
}

.btn span:first-child {
  position: relative;
  z-index: 2;
}

.btn span:last-child {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -10px;
  background: #3a3a3a;
}

.btn span:last-child:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -50px;
  border: 10px solid transparent;
  border-right-color: #3a3a3a;
}

.btn span:last-child:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -50px;
  border: 10px solid transparent;
  border-left-color: #3a3a3a;
}

/*HTML代码*/
<div class="btn">
  <span>Button 1</span>
  <span></span>
</div>
<div class="btn">
  <span>Button 2</span>
  <span></span>
</div> 

上述CSS代码实现了两个按钮中间斜杠的效果，通过:before和:after伪元素实现了斜杠效果。其中:after伪元素用于实现黑色的斜杠，:before伪元素用于设置斜杠的后面区域为白色。同时，添加了skewX(30deg)的CSS3变形属性，用于设置斜杠的倾斜度。

CSS的这种传统操作，可以实现非常独特的效果，同时也可以更好地丰富页面的视觉效果与交互体验。如果你有兴趣的话，可以继续深入学习CSS。