CSS響應高度的div在圓圈後面

Question

是否有可能在css中使用響應式設計創建此模板，以便背景線始終位於正確的位置並且正確的高度無論窗口大小有多大。

Answer 1

可以使用僞元素來創建此，而是要創造完美的響應圈子，你可以同時height和圓形的width使用vh單位。然後，您可以使用position: absolute和transform: translate()來定位僞元素。

body { 
 
    height: 100vh; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.circle { 
 
    position: relative; 
 
    width: 60vh; 
 
    height: 60vh; 
 
    border-radius: 50%; 
 
    background: #E54B4B; 
 
} 
 
.circle:before, 
 
.circle:after { 
 
    content: ''; 
 
    position: absolute; 
 
    transform: translate(-50%, -50%); 
 
    top: 50%; 
 
    left: 50%; 
 
} 
 
.circle:before { 
 
    transform: translate(-50%, -50%); 
 
    width: 100vw; 
 
    background: #B65657; 
 
    height: 20vh; 
 
    z-index: -1; 
 
} 
 
.circle:after { 
 
    height: 20vh; 
 
    width: 20vh; 
 
    background: white; 
 
}

<div class="circle"></div>