Циркулярный эффект в прямоугольнике

Question

Я пытаюсь сделать дизайн, как показано на изображении, но основная проблема заключается в том, что я не могу использовать z-index там, потому что он будет воздействовать на другие элементы. Есть ли способ достичь этого? Спасибо

Answer 1

Вы можете создать что-то подобное с псевдоэлементом.

.element { 
 
    width: 400px; 
 
    height: 45px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    border: 2px solid orange; 
 
    border-bottom: none; 
 
} 
 
.element:after { 
 
    content: ''; 
 
    width: 210%; 
 
    height: 700px; 
 
    left: 50%; 
 
    border-radius: 50%; 
 
    border: 2px solid orange; 
 
    position: absolute; 
 
    transform: translateX(-50%); 
 
}

<div class="element"></div>