Invertire l’angolo arrotondato in CSS?

Ho un codice CSS:

-moz-border-radius-topleft:50px; 

Ottengo il risultato:

angolo arrotondato

C’è qualche possibilità di dare come questo:

angolo arrotondato invertito

Solo per aggiornare questo, sembra che tu possa in più modi.

Lea Verou ha pubblicato una soluzione

Ecco la mia usando border-image

Utilizzando l’immagine del bordo

html

 

css

 div { width: 200px; border-width: 55px; -moz-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat; -webkit-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat; -o-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat; border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat; margin: 50px auto; } 

Usando il gradiente radiale

La soluzione di Lea Verou

html

 

css

 .inner-round { background-image: radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px), radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px), radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px), radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px); } 

Nei browser moderni, puoi usare mask-image :

 #aux-container { width: 100px; height: 100px; background: #f00; -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px); } 
 

Puoi anche usare e inline svg con un elemento path :

 body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;} svg{width:30%;} 
    

Purtroppo, al momento non esiste una soluzione basata su specifiche CSS ufficiali o implementate 🙁

Tuttavia, come altre persone hanno aggiunto, ci sono possibili soluzioni (o trucchi?) Che puoi fare per ottenere lo stesso effetto usando librerie JS o complesse implementazioni HTML / CSS. Mi sono imbattuto in questo problema mentre cercavo un modo per realizzare angoli ancora più complessi dell’OP senza usare immagini.

Ho archiviato un bug (Richiesta di funzionalità) sul sito webkit – perché non sembra esserci già un deposito.

Bug 62458 – Richiesta di funzionalità: angoli arrotondati inversi

Per un semplice colore di sfondo, in realtà puoi, usando lo pseudo elemento e l’ombra della casella per disegnare il colore di sfondo, e non nasconderà gli sfondi del contenitore del genitore, in realtà li vedrai attraverso .

Quello di cui hai bisogno è un browser che comprenda: before /: after e box-shadow 🙂 …

Per IE8, puoi disegnare i bordi di hudge anziché le ombre. http://codepen.io/anon/pen/fFgDo

approccio box-shadow: http://codepen.io/anon/pen/FwLnd

 div { margin:2em; /* keep it away from sides to see result */ padding:2em;/* for test to size it when empty */ position:relative; /* reference to set pseudo element where you wish */ overflow:hidden;/* you do not want the box-shadow all over the page */ } div:before { content:''; position:absolute; width:80px; height:80px; top:-40px; left:-40px; border-radius:100%; box-shadow:0 0 0 2000px #1D005D;/* here draw the shadow inside its parent , maybe z-index will be required for content */ } 

demo e visual di pseudo interazione


lo pseudo elemento può assumere qualsiasi forma e trasformarsi tramite css e impostare qualsiasi punto del suo elemento per disegnare dei fori attraverso: esempi: http://codepen.io/gc-nomade/pen/nKAka

Ci sono modi in cui puoi risolvere questo problema usando solo i CSS, ma dipenderà dal colore dello sfondo (se solido è più facile) se hai un pattern per lo sfondo potrebbe essere leggermente più complesso.

Copro un esempio di base qui su come creare un Raggio bordo inverso in CSS (qui) . Questo usa un trucco con la dimensione di Border per usare l’interno, potresti dover fare un po ‘di posizionamento per farlo funzionare correttamente, ma come puoi vedere è ansible. Soprattutto se si specifica un background-color per ciascuna span .

Se vuoi tutti e 4 gli angoli dovresti aggiungere una class separata per ogni span all’interno del tuo div, e ogni class simulerebbe un angolo, in alto a sinistra, in alto a destra ecc.

No. Se hai uno sfondo solido puoi probabilmente usare css per creare il morso.
Altrimenti, non c’è nulla di speciale che puoi fare in più usando PNG, proprio come faresti con gli angoli arrotondati prima border-radius .

in realtà c’è un modo, come questo:

 

ma come dice @Domenic avrai bisogno di uno sfondo solido, altrimenti otterrai questo:

 

Può essere fatto usando after element. controlla questo jsfiddle link enter code here

No non c’è.