CSS responsive Höhe von div hinter dem Kreis

Question

ist es möglich, diese Patern in CSS mit Responsive Design zu erstellen, so dass Hintergrundlinie immer an der richtigen Position ist und die richtige Höhe nicht mather, wie groß die Größe des Fensters ist.

Answer 1

Sie können Pseudo-Elemente verwenden, um dies zu schaffen, aber perfekt ansprechenden Kreis erstellen Sie vh Einheiten sowohl auf height und width des Kreis verwenden können. Dann können Sie einfach position: absolute und transform: translate() verwenden, um Pseudo-Elemente zu positionieren.

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>