[分享]css不规则选项卡

CSS不规则选项卡指的是在网页中使用CSS样式，让选项卡呈现出不规则的形状。这种效果通常用于艺术感强的网站设计中，可以使网页更加美观、独特。下面我们来看一下如何制作一个CSS不规则选项卡：.tab {...

CSS不规则选项卡指的是在网页中使用CSS样式，让选项卡呈现出不规则的形状。这种效果通常用于艺术感强的网站设计中，可以使网页更加美观、独特。下面我们来看一下如何制作一个CSS不规则选项卡：

.tab {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 60px;
  color: #fff;
  background-color: #333;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}
.tab:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60px;
  right: 0;
  background-color: #555;
  transform: skewX(-30deg);
}
.tab:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -60px;
  left: 0;
  background-color: #555;
  transform: skewX(30deg);
}
.tab li {
  position: relative;
  list-style: none;
  padding: 0 20px;
  cursor: pointer;
}
.tab li:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #666;
  transform-origin: bottom center;
  transform: scaleY(0);
  transition: transform 0.3s ease;
}
.tab li:hover:before,
.tab li.active:before {
  transform: scaleY(1);
} 

首先我们先创建一个ul列表，通过给ul设置overflow:hidden属性来隐藏选项卡的不规则部分。然后通过:before和:after伪元素分别创建两个不规则的三角形，实现选项卡的不规则边框。给ul设置background-color属性，可以使选项卡的背景颜色与不规则部分融为一体。

接着我们对li元素进行样式设置。为每个li元素创建一个:before伪元素，通过transform属性来实现选项卡底部的动画效果。当鼠标悬停在选项卡上或选项卡处于激活状态时，通过使用:hover伪类或active类来触发动画效果。这样就完成了一个简单的CSS不规则选项卡。

总的来说，CSS不规则选项卡需要用到伪元素和transform属性，通过巧妙地利用这些属性，可以实现网页中丰富多彩的设计效果。