在矩形中的圓形效果

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>