导航选项卡上的 CSS 形状

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 中会产生不同的结果。 Clip-path 属性似乎不适用于 Edge，因为它尚不受支持。

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

Answer 1

只需在new标签的父标签中添加overflow:hidden;即可。