Html Css角度背景色倍数

我试图获得像图片上一样的效果，但仍然能够向其中添加文本，并添加活动类。我尝试使用顶部边框（例如红色）和右边框透明，但无法获得像图片上一样的匹配角度。 任何想法和链接都会有所帮助

。示例{
宽度：200px；
高度：40px；
颜色：白色；
线高：40px；
文本对齐：居中；
背景色：#333；
}
.示例：：之前{
内容：''；
显示：块；
浮动：左；
宽度：10px；
右边框：10px实心透明；
边框顶部：40px纯红；
}

文本

。示例{
宽度：200px；
高度：40px；
颜色：白色；
线高：40px；
文本对齐：居中；
}
.示例：第n个孩子（1）{
背景：线性梯度（105度，红色20px，#000 20px）；
}
.示例：第n个孩子（2）{
背景：线性梯度（105度，黄色10px，#000 10px）；
}

文本
text

您可以使用flex和渐变背景：

*{
保证金：0；
填充：0；
}
保险商实验室{
显示：内联flex；
柔性流动：柱；
垂直对齐：顶部；
宽度：13em；
高度：17公分；
背景：#153454；
框阴影：插入0 0 2px；
边框：8px实心#224262；
背景：线性梯度（97度，透明3em，#153454 1em），
线性梯度（至顶部，#00B169 20%，#00A6C4 20%，#00A6C4 40%，#FFDE00 40%，#FFDE00 60%，#FF9900 60%，#FF9900 80%，#E40000 80%）
}
李{
弹性：1；
文本对齐：居中；
显示器：flex；
对齐项目：居中；
证明内容：中心；
字体变体：小大写字母；
颜色：#ddd；
字号：1.5em；
}
.表演，李：悬停{
框阴影：插入0 2px#FF9600
}

项目
项目
项目
项目
项目

摆弄一下就可以了：在我设法让它看起来还可以之后，仍然需要玩一点数字游戏，使它更灵敏、更完美

HTML:

<div class="levels">
          <div class="certain">CERTAIN</div>
          <div class="expected">EXPECTED</div>
          <div class="probable">EXPECTED</div>
          <div class="possible">EXPECTED</div>
          <div class="notexpected">NOT EXPECTED</div> 
</div>

---

这是我使用

剪辑路径的版本

（）

.red{color:#e10215；}
.橙色{颜色：#fca326；}
.黄色{颜色：#fdda2e；}
.蓝色{颜色：#22a6c2；}
.green{color:#1fbf73；}
.菜单{
列表样式：无；
最大宽度：200px；
边框：1px实心#081829；
外形：8px固体#254361；
填充：0；
}
.菜单项{
位置：相对位置；
文本转换：大写；
字体系列：无衬线；
字体大小：300；
背景色：#183553；
填料：1米2米；
框大小：边框框；
}
.菜单项范围{
显示：块；
}
.菜单项.装饰{
宽度：20%；
位置：绝对位置；
身高：100%；
排名：0；
左：0；
}
.菜单项.标签{
宽度：100%；
左：20%；
颜色：白色；
}
.菜单项：悬停{
外形：1px实心；
轮廓偏移：-1px；
}
.红色，装饰{
背景色：#e10215；
-webkit剪辑路径：多边形（0,90%0,80%100,0%100%）；
剪辑路径：多边形（0,90%0,80%100,0%100%）；
}
.橙色.装饰{
背景色：#fca326；
-webkit剪辑路径：多边形（0,80%0,70%100,0%100%）；
剪辑路径：多边形（0,80%0,70%100,0%100%）；
}
.黄色.装饰{
背景色：#fdda2e；
-webkit剪辑路径：多边形（0,70%0,60%100,0%100%）；
剪辑路径：多边形（0,70%0,60%100,0%100%）；
}
.蓝色.装饰{
背景色：#22a6c2；
-webkit剪辑路径：多边形（0,60%0,50%100,0%100%）；
剪辑路径：多边形（0,60%0,50%100,0%100%）；
}
格林，德科{
背景色：#1fbf73；
-webkit剪辑路径：多边形（0,50%0,40%100,0%100%）；
剪辑路径：多边形（0,50%0,40%100,0%100%）；
}

某些


预期


可能的


可能的


不期而至

我尝试过这个方法，但无法获得匹配的角度，目前尝试使用before/after，但使用线性渐变将使其锯齿状。我已经使用after制作了它，但这对我来说很合适。谢谢

levels{
    width:12em;
    border:2px solid #06182a;
    height:16em;
    margin-left:7%;
    border-radius:4px;
    background-color:#153454;
    padding:5px;

  }


  .levels div{ 
    color:white;
    height:20%;
    text-align:center;
    vertical-align: center;
    position:relative; 

  }

  .levels div.certain:after{
    content:'';
    height:100%;
    width:20%;
    border-top: 3.2em solid red;
    position:absolute;
    border-right:7px solid transparent;
    left:0px;
  }

   .levels div.expected:after{
    content:'';
    height:100%;
    width:16%;
    border-top: 3.2em solid orange;
    position:absolute;
    border-right:7px solid transparent;
    left:0px;
  }

  .levels div.probable:after{
    content:'';
    height:100%;
    width:12.5%;
    border-top: 3.2em solid yellow;
    position:absolute;
    border-right:7px solid transparent;
    left:0px;
  }


  .levels div.possible:after{
    content:'';
    height:100%;
    width:10%;
    border-top: 3.2em solid blue;
    position:absolute;
    border-right:7px solid transparent;
    left:0px;
  }


  .levels div.notexpected:after{
    content:'';
    height:100%;
    width:6%;
    border-top: 3.2em solid green;
    position:absolute;
    border-right:7px solid transparent;
    left:0px;
  }