CSS Shape over导航选项卡

Question

我想生成如下设计。计划标签顶部的“新”。我使用的属性与chrome和mozilla搭配良好，但在Edge中无法使用。

下面是我用来在chrome中完成工作的样式：

a.subnav__items{
padding-left: 15px !important;
 &::after {
    content:"NEW";
    display: block; 
    color:#FFF;
    font-size:8px;
    position:absolute;
    background-color:#D61800;

     @supports ( clip-path:polygon(0 0) ) or ( -webkit-clip-path:polygon(0 0) ){                        
        transform: rotate(-50deg);           
        width:40px; 
        top: 6px;
        left: -11px;        
        clip-path:polygon(60% -65%,100% 87%,0 91%,7% 74%);
        -webkit-clip-path:polygon(60% -65%,100% 87%,0 91%,7% 74%);           
     }

 }

}

样式的标记是这样的：

    <div class="subnav">

  <div  *ngFor="let item of subHeaders;let i=index;">
    <a   [ngClass]="{subnav__items: item.label=='plans' && i==4}" href="#" >{{item.label}}
    </a>
  </div>


</div>

相同的样式在ME中产生不同的结果。剪切路径属性似乎不适用于Edge，因为尚不支持该属性。

有没有更好的方法来实现它？我在这个问题上停留了一段时间。

Answer 1

只需在overflow:hidden;标记的父标记中添加new。