Wie macht man diese runde Form mit CSS

-2

Wie kann ich diese Form mit der inneren abgerundeten Bereich transparent machen?Wie macht man diese runde Form mit CSS

Hier Beispiel für das, was ich umsetzen möchte: http://codepen.io/moradxd/pen/EgVVdg

body { 
 
    background: #16c5de; 
 
} 
 

 
.shape-box { 
 
    width: 80px; 
 
    height: 80px; 
 
    position: relative; 
 
    margin: 100px auto; 
 
} 
 

 
    .element-1, 
 
    .element-2 { 
 
    display: block; 
 
    position: relative; 
 
    } 
 
    
 
    .element-1 { 
 
    width: 80px; 
 
    height: 40px; 
 
    background: #fff; 
 
    position: absolute; 
 
    bottom: 0; 
 
    z-index: 0; 
 
    } 
 
    
 
    .element-2 { 
 
    width: 80px; 
 
    height: 80px; 
 
    background: #16c5de; 
 
    z-index: 1; 
 
    border-radius: 100%; 
 
    }

<div class="shape-box"> 
 
    <span class="element-1"></span> 
 
    <span class="element-2"></span> 
 
</div><!-- .shape-box -->

Quelle

2016-09-09 Morad Hamdy

Haben Sie versucht, sich dies zu tun? Codebeispiele? Warum brauchst du den Hintergrund transparent? Versuchen Sie, es mit Text zu überlagern? – ryantpayton

Ja, ich habe es versucht !! Mein Versuch war mit 2 Elementen zu machen. Der 1. ist mit 80px * 80px farbigen Hintergrund gerundet. Das zweite ist ein Rechteck mit 80px * 40px weißem Hintergrund. Ich brauche dieses Teil transparent, wenn ich Hintergrundbild für den Körper zum Beispiel verwende. Ich brauche es transparent. Hier Beispiel http://codepen.io/moradxd/pen/EgVVdg –

@Pete .. Ich habe nicht die gleiche Idee Zweck in dieser Frage gefunden. –

Sie können :before oder :after versuchen Pseudoelement und box-shadow wie unten dargestellt.

body { 
 
    background: #007aff; 
 
    padding: 40px; 
 
    margin: 0; 
 
} 
 
.box { 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
.box:before { 
 
    box-shadow: 0 0 0 100px #fff; 
 
    position: absolute; 
 
    border-radius: 100%; 
 
    margin-left: -60px; 
 
    height: 200px; 
 
    content: ''; 
 
    width: 120px; 
 
    left: 50%; 
 
    bottom: 0; 
 
}

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

Quelle

2016-09-09 13:25:51

Perfekte Antwort .. – Komal

nice Verwendung von Box Schatten! – Pete

@Pete Danke :) –

Wie macht man diese runde Form mit CSS

Antwort

Verwandte Themen