شكل CSS فوق علامة تبويب التنقل

0

أريد إنشاء تصميم مثل أدناه. A "جديد" في الجزء العلوي من علامة التبويب الخطط. الخصائص التي استخدمتها تعمل بشكل جيد مع الكروم والموزيلا ولكنها تنهار في Edge.

Imagen 11525

فيما يلي الأنماط التي قمت بتطبيقها لإنجاز المهمة في 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>

نفس النمط يعطي نتيجة مختلفة في الشرق الأوسط. لا يبدو أن خاصية Clip-path تعمل مع Edge لأنها غير مدعومة بعد.

Imagen 11526

هل هناك طريقة أفضل لتحقيق ذلك؟ أنا عالق في هذه القضية لبعض الوقت الآن.

1 إجابة

1
افضل جواب

فقط اضف overflow:hidden; في علامة الأصل لـ new بطاقة شعار.

:مؤلف

أسئلة ذات صلة

فوق
قائمة طعام