css圆角梯形tab

CSS圆角梯形tab通常是指通过CSS样式创建出带有圆角的不规则四边形，这种形状常用于设计网页导航栏中的选项卡或者是按钮等UI元素。在CSS中，可以结合`border-radius`属性、`padding`和`background-color`来实现这个效果。例如：

.tab {
  display: inline-block;
  width: 100px; /* 根据需要设置宽度 */
  height: 48px; /* 根据需要设置高度 */
  border: none; /* 取消默认边框 */
  background-color: #f0f0f0; /* 设置背景颜色 */
  color: black; /* 设置文字颜色 */
  text-align: center;
  line-height: 48px; /* 确保文本垂直居中 */
  position: relative; /* 使用定位使其更容易控制形状 */
}

.tab:before,
.tab:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
}

.tab:before { /* 创建上三角形 */
  border-width: 24px 0 24px 24px;
  border-color: transparent transparent transparent #f0f0f0;
}

.tab:after { /* 创建下三角形 */
  border-width: 24px 24px 24px 0;
  border-color: transparent #f0f0f0 transparent transparent;
}