如何为标签实现倾斜背景样式？已尝试clip-path和伪元素未果

针对你遇到的问题，下面提供几种可靠的实现方式，既能保证背景倾斜效果，又能自适应不同文字长度的标签高度：

方法1：纯背景渐变实现（无需伪元素） #

通过多层线性渐变组合出倾斜角，完全依赖CSS背景属性，无需额外元素，自适应能力强：

body {
  background-color: grey;
}

.label {
  /* 三层背景组合：右上角斜切、右下角斜切、主体白色 */
  background: 
    linear-gradient(to bottom right, transparent 49.5%, white 50%) top right / 15px 100% no-repeat,
    linear-gradient(to top right, transparent 49.5%, white 50%) bottom right / 15px 100% no-repeat,
    white;
  /* 右侧预留斜角宽度，避免文字被覆盖 */
  padding: 10px 30px 10px 15px;
  font-size: 25px;
  line-height: 1;
  /* 让标签宽度随文字自适应 */
  display: inline-block;
  margin: 5px;
}

<div class="label">North Sydney</div>
<div class="label">Sydney</div>
<div class="label">New South Wales</div>

说明：

• 15px是斜角的宽度，可根据需求调整
• 49.5%和50%的分界是为了避免渐变出现模糊线条
• 整体背景会自动跟随标签高度变化，完全适配不同文字长度

方法2：改进的伪元素实现（高度自适应） #

如果你更倾向用伪元素，只要让伪元素高度继承标签的100%，就能解决之前的高度偏差问题：

body {
  background-color: grey;
}

.label {
  position: relative;
  background-color: white;
  padding: 10px 15px;
  font-size: 25px;
  line-height: 1;
  display: inline-block;
  /* 给右侧伪元素留出空间 */
  margin-right: 15px;
  margin: 5px;
}

.label::after {
  content: '';
  position: absolute;
  top: 0;
  right: -15px;
  /* 高度完全继承标签，保证和标签高度一致 */
  height: 100%;
  width: 0;
  /* 用border生成斜角效果 */
  border-top: 100% solid transparent;
  border-left: 15px solid white;
}

<div class="label">North Sydney</div>
<div class="label">Sydney</div>
<div class="label">New South Wales</div>

说明：

• 伪元素通过height: 100%完全跟随标签高度，不管文字多少都不会出现偏差
• 15px为斜角宽度，可按需修改

关于你之前的clip-path问题 #

你之前的clip-path写法只会生成三角形，要实现带斜角的矩形标签，正确的路径应该是：

.label {
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
}

这个路径会在右侧创建斜切角，同样能自适应文字长度和高度，你可以直接替换测试。

内容的提问来源于stack exchange，提问作者matt.mcg