Wie kann ich Innenradius in CSS zeichnen?

Question

Bitte helfen Sie mir heraus, dass ich ein div wie diese

Answer 1

Methode # 01:

Verwendung raidal-gradient:

body { 
 
    background: #f0f0f0; 
 
    margin: 0; 
 
} 
 
.box { 
 
    background: radial-gradient(circle at bottom right, transparent 60px, #000 60px); 
 
    height: 150px; 
 
    width: 250px; 
 
}

<div class="box"></div>

Methode # 02:

Sie können es schaffen, mit Kombination von :before oder :after Pseudo-Elemente und box-shadow CSS-Eigenschaft.

body { 
 
    background: #f0f0f0; 
 
    margin: 0; 
 
} 
 
.box { 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 150px; 
 
    width: 250px; 
 
} 
 

 
.box:before { 
 
    box-shadow: 0 0 0 1000px #000; 
 
    border-radius: 100%; 
 
    position: absolute; 
 
    bottom: -30px; 
 
    height: 100px; 
 
    right: -35px; 
 
    width: 100px; 
 
    z-index: -1; 
 
    content: ''; 
 
}

<div class="box"></div>

Answer 2

Die einfachste Methode, eine pseudo element verwenden werden machen wollen. Indem Sie das Element :after absolut positionieren, können Sie den gewünschten Effekt erzielen.

.box { 
 
    background: #000; 
 
    width: 300px; 
 
    height: 150px; 
 
    position: relative; 
 
} 
 
.box:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 50%; 
 
    background: #fff; 
 
    right: -75px; 
 
    bottom: -75px; 
 
}

<div class="box"></div>

Answer 3

dieses CSS versuchen,

.rec{ 
    height: 200px; 
    background: black; 
    position: relative; 
    width:600px; 
} 

.rec:after { 
    content: ''; 
    position: absolute; 
    bottom: -20px; right: -20px; 
    border-bottom: 100px solid white; 
    border-left: 100px solid white; 
    width: 0; 
    background:#fff; 
    border-radius:150px; 

}