css一边柱状一边弧状的标签

CSS是一门用于网页样式设计的语言，它可以让我们控制网页的布局、字体、颜色等多个方面，使得网页更加美观和易读。当然，CSS还可以用来实现一些比较炫酷的效果，比如一边柱状一边弧状的标签。

.tag {
  width: 200px;
  height: 40px;
  border-radius: 20px;
  background: linear-gradient(to right, #56c1cf, #4585d1);
  position: relative;
}

.tag::before {
  content: ';
  position: absolute;
  top: -20px;
  left: 0;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  transform: translateX(-50%);
}

.tag::after {
  content: ';
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 40px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background: linear-gradient(to bottom, #56c1cf, #4585d1);
} 

上述代码中，我们通过设置伪元素::before和::after来分别实现了标签的弧状和柱状。其中，::before表示弧状部分，通过设置一个圆形的白色背景和位于标签顶部的位置，即可实现一个圆形的标签头。::after则表示柱状部分，通过设置斜角的颜色渐变、右侧的宽度和圆角的属性值，即可实现一个柱状的标签身。

最终的效果如下图所示：