Forma CSS con curva interna e sfondo trasparente

Ho bisogno di creare una forma CSS come questa immagine ..

inserisci la descrizione dell'immagine qui

Per favore controlla questo violino del mio lavoro. Ho creato qualcosa del genere, ma non posso dare una curva ad esso.

#shape { border-left: 70px solid transparent; border-top: 100px solid red; height: 0; width: 200px; } 

Qualcuno può aiutarmi?

Puoi usare uno pseudo elemento con raggio di bordo e ombre di sfondo per creare la curva e abilitare uno sfondo trasparente per la curva.

Produzione :

Forma CSS con curva di inserto trasparente

 #shape { width: 300px; height: 100px; position: relative; overflow: hidden; } #shape:before { content: ''; position: absolute; top: 10%; right: 0; width: 300%; padding-bottom: 300%; border-radius: 100%; background: none; box-shadow: 10px -10px 5px 300px #F15723; z-index: -1; } body{background:url(https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg);background-size:cover;} 
 

Variante # 01:

CSS3 linear-gradient() può anche disegnare questo sfondo:

CSS:

 div { background: linear-gradient(45deg, transparent 50px, tomato 50px); } 

Immagine di uscita:

inserisci la descrizione dell'immagine qui

 body { background: linear-gradient(lightgreen, green); min-height: 100vh; margin: 0; } div { background: linear-gradient(45deg, transparent 50px, tomato 50px); height: 150px; margin: 20px; width: 400px; }