如何使用CSS制作像这样的成角度的标签，请参见下图？

Question

任何人都可以创建CSS标签：

Answer 1

您的问题使我感到好奇，我做了一些挖掘工作，这就是我发现的情况：

body {
   padding: 30px;
}

.btn {
   margin-top: 5px;
}

.btn-arrow-right,
.btn-arrow-left {
   position: relative;
   padding-left: 18px;
   padding-right: 18px;
}

.btn-arrow-right {
   padding-left: 36px;
}

.btn-arrow-left {
   padding-right: 36px;
}

.btn-arrow-right:before,
.btn-arrow-left:before{
   content: "";
   position: absolute;
   top: 5px;
   width: 27px;
   height: 27px;
   background: inherit;
   border: inherit;
   border-left-color: transparent;
   border-bottom-color: transparent;
   border-radius: 0px 4px 0px 0px;
   -webkit-border-radius: 0px 4px 0px 0px;
   -moz-border-radius: 0px 4px 0px 0px;
}

.btn-arrow-right:before {
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
}

.btn-arrow-left:before{
   transform: rotate(225deg);
   -webkit-transform: rotate(225deg);
   -moz-transform: rotate(225deg);
   -o-transform: rotate(225deg);
   -ms-transform: rotate(225deg);
}

.btn-arrow-right:before,
.btn-arrow-left:before {
   left: -11px;
}

.btn-arrow-left:before {
   z-index: -1;
}

.btn-arrow-right:before {
   background-color: white;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-success btn-arrow-left"> Default</button>

Answer 2

使用CSS可以轻松完成功能区角，如下所示：

const response = await models.Cartridge.bulkCreate(
[{ quantity, active, code: null }],
{ returning: true, individualHooks: true});

span {
  position: absolute;
  border-color: pink transparent pink pink;
  border-style: solid;
  border-width: 60px;
}