矩形の円の効果

Question

私は画像のようにデザインをしようとしていますが、主な問題は他の要素に影響するため、そこにはZ-インデックスを使用できないことです。これを達成する方法はありますか？ありがとうございました

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>