导航选项卡上的 CSS 形状

Question

我想生成如下设计。计划选项卡顶部的"new"。我使用的属性适用于 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;