Inverta o canto arredondado em CSS?

Eu tenho um código css:

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

Eu obtenho o resultado:

canto arredondado

Existe alguma possibilidade de dar assim:

canto arredondado invertido

Apenas para atualizar isso, parece que você pode de várias maneiras.

Lea Verou publicou uma solução

Aqui está o meu usando a imagem de borda

Usando a imagem da borda

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 gradiente radial

A solução de 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); } 

Nos navegadores modernos, você pode usar 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); } 
 

Você também pode usar e inline svg com um elemento de caminho :

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

Infelizmente, não há atualmente uma solução baseada em especificações CSS oficiais ou implementadas 🙁

No entanto, como outras pessoas adicionaram, existem soluções possíveis (ou truques?) Que você pode fazer para obter o mesmo efeito usando bibliotecas JS ou implementações complexas de HTML / CSS. Eu me deparei com essa questão enquanto procurava uma maneira de tornar os cantos ainda mais complexos do que o OP sem usar imagens.

Eu arquivei um bug (Solicitação de Recurso) no site do webkit – já que parece não haver um arquivado.

Bug 62458 – Solicitação de recurso: cantos arredondados invertidos

Para uma cor de fundo comum, você pode, usando o pseudoelemento e a sombra de checkbox para desenhar a cor de fundo, e não ocultará os planos de fundo do contêiner pai, você realmente os verá .

O que você precisa é de um navegador que entenda: before /: after e box-shadow 🙂 …

Para o IE8, você pode desenhar bordas de hudge em vez de sombras. http://codepen.io/anon/pen/fFgDo

abordagem 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 */ } 

demonstração e visual de pseudointeração


pseudo elemento pode tomar qualquer forma, e transformar via css e definir qualquer lugar em seu elemento para desenhar tipo de buracos através de: exemplos: http://codepen.io/gc-nomade/pen/nKAka

Existem maneiras de resolver esse problema usando apenas CSS – no entanto, isso depende da cor do plano de fundo (se for mais fácil), se você tiver um padrão para segundo plano, poderá ser um pouco mais complexo.

Eu cubro um exemplo básico aqui de como fazer um raio de borda inversa em CSS (aqui) . Isso usa um truque com o tamanho da borda para usar o interior, você pode ter que fazer algum posicionamento para fazê-lo funcionar corretamente, no entanto, como você pode ver o seu possível. Especialmente se você especificar uma background-color para cada span .

Se você quiser todos os 4 cantos, você teria que adicionar uma class separada para cada span dentro de seu div, e cada class simularia um canto, superior esquerdo, superior direito, etc.

Não. Se você tiver um background sólido, provavelmente poderá usar o css para criar a mordida.
Caso contrário, não há nada especial que você possa fazer usando os PNGs, da mesma forma que cria cantos arredondados antes border-radius .

na verdade há um jeito, assim:

 

mas como @Domenic diz que você precisará de um background sólido, senão você terá isto:

 

Isso pode ser feito usando after element. verifique este link jsfiddle enter code here

Não, não há.