Was ist der beste Weg, um einen halben Kreis negativen CSS-Rand Radius div-Maske zu machen?

Question

Jetzt Tage, die ich viele Themen mit Dreieck/Pfeil Maske zu sehen, die über einen div platziert

Sie können es here über das Video sehen

Aber ich würde eine invertierte tun (negative wenn möglich) Grenzradius, das einen Halbkreis bildet, ein bisschen wie diese

Ich war fast mit einem radialen Farbverlauf, aber in Chrome sieht es einfach kantig aus.

http://jsfiddle.net/EjE7c/2457/

.haflcircle { 
    background: 
     -moz-radial-gradient(100% 0, circle, rgba(0,0,0,0) 25px, #000 25px), 
     -moz-radial-gradient(0 0, circle, rgba(0,0,0,0) 25px, #000 25px); 
    background: 
     -o-radial-gradient(100% 0, circle, rgba(0,0,0,0) 25px, #000 25px), 
     -o-radial-gradient(0 0, circle, rgba(0,0,0,0) 25px, #000 25px); 
    background: 
     -webkit-radial-gradient(100% 0, circle, rgba(0,0,0,0) 25px, #000 25px), 
     -webkit-radial-gradient(0 0, circle, rgba(0,0,0,0) 25px, #000 25px); 
} 

.haflcircle { 
    background-position: bottom left, bottom right, top right, top left; 
    -moz-background-size: 50% 50%; 
    -webkit-background-size: 50% 50%; 
    background-size: 50% 50%; 
    background-repeat: no-repeat; 
    height:50px; 
    width:100%; 
    position:absolute; 
    bottom:0; 
    left:0; 
} 

es wäre toll, wenn Sie eine bessere Art und Weise kennen, dies zu tun.

gefunden passende Lösung mit Hilfe von here Es funktioniert auch mit transparenten Farben http://jsfiddle.net/EjE7c/2465/ thnx für helfen

Answer 1

Ziemlich einfach, ohne radiale Gradienten und so zu verwirren, die zu tun.

Stellen Sie nur sicher, dass die linke Position des Halbkreises 50% - 1/2 (Breite des Halbkreises) und die obere Position -1/2 * Höhe des Halbkreises beträgt.

#topdiv { 
 
    height: 50px; 
 
    background: lightblue; 
 
} 
 
#bottomdiv { 
 
    position: relative; 
 
    height: 50px; 
 
    background: black; 
 
} 
 
#halfcircle { 
 
    position: absolute; 
 
    height: 30px; 
 
    width: 30px; 
 
    top: -15px; 
 
    left: 47%; 
 
    background: lightblue; 
 
    border-radius: 100% 100%; 
 
}

<div id="topdiv"></div> 
 
<div id="bottomdiv"> 
 
    <div id="halfcircle"></div> 
 
</div>

jsfiddle

Answer 2

I clip-path in SVG verwendet, um den Kreis zu schneiden. Sie müssen den Kreis als Pfad definieren, sonst können Sie den Clip nicht invertieren. In meinem Beispiel ist der Kreis 80 Pixel breit.

SVG

<svg xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
     <clipPath id="circleClip"> 
     <path d="M0,0H100V100H-100zM5,0a40,40 0 1,0 80,0a40,40 0 1,0 -80,0"/> 
     </clipPath> 
    </defs> 
</svg> 

Die d-Attribut zeigt zwei Wege, die erste, um ein Rechteck ist und der zweite der Kreis es auszuschneiden. Ich habe auch versucht mit clip-rule="evenodd", aber das hat nicht wirklich funktioniert für mich.

es wie folgt in Ihrem CSS:

-webkit-clip-path: url(#circleClip); 
clip-path: url(#circleClip); 

Hier ist ein funktionierendes Beispiel: http://jsfiddle.net/h2stx2L8/1/