Invierte la esquina redondeada en CSS

Tengo un código CSS:

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

Obtengo el resultado:

esquina redondeada

¿Hay alguna posibilidad de dar como este?

esquina redondeada invertida

Solo para actualizar esto, parece que puedes hacerlo de múltiples maneras.

Lea Verou publicó una solución

Aquí está el mío usando border-image

Usar imagen de borde

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

La solución 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); } 

En los navegadores modernos, puede 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); } 
 

También puedes usar y en línea svg con un elemento path :

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

Lamentablemente, actualmente no existe una solución basada en especificaciones CSS oficiales o implementadas 🙁

Sin embargo, como otras personas han agregado, hay posibles soluciones (o trampas) que puede hacer para lograr el mismo efecto utilizando bibliotecas JS o implementaciones complejas de HTML / CSS. Me encontré con este problema mientras buscaba una forma de hacer esquinas aún más complejas que el OP sin usar imágenes.

He archivado un error (Solicitud de funciones) en el sitio de webkit, ya que parece que ya no hay uno archivado.

Error 62458 – Solicitud de funciones: Esquinas redondeadas inversas

Para un color de fondo simple, en realidad puede usar el pseudo elemento y la sombra de cuadro para dibujar el color de fondo, y no ocultará los fondos del contenedor principal, realmente los verá .

Lo que necesita es un navegador que comprenda: before /: after y box-shadow 🙂 …

Para IE8, puede dibujar bordes hudge en lugar de sombras. http://codepen.io/anon/pen/fFgDo

enfoque de sombreado de caja: 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 y visual de pseudo interacción


El pseudo elemento puede tomar cualquier forma, y ​​transformarse a través de css y establecerse en cualquier parte de su elemento para dibujar el tipo de agujeros a través de: ejemplos: http://codepen.io/gc-nomade/pen/nKAka

Hay formas en que puedes resolver este problema usando solo CSS; sin embargo, dependerá del color de tu fondo (si es más fácil) si tienes un patrón para el fondo puede ser un poco más complejo.

Aquí cubro un ejemplo básico de cómo hacer un radio de borde inverso en CSS (aquí) . Esto utiliza un truco con el tamaño de Border para usar el interior, es posible que tenga que hacer algo de posicionamiento para que funcione correctamente, sin embargo, como puede ver, es posible. Especialmente si especifica un background-color de background-color para cada span .

Si quieres las 4 esquinas, deberás agregar una clase separada para cada span dentro de tu div, y cada clase simulará una esquina, arriba a la izquierda, arriba a la derecha, etc.

No. Si tienes antecedentes sólidos , probablemente puedas usar css para crear la mordida.
De lo contrario, no hay nada especial que puedas hacer al usar PNG, al igual que crearías esquinas redondeadas antes border-radius .

en realidad hay una forma, como esta:

 

pero como @Domenic dice que necesitarás un fondo sólido, de lo contrario obtendrás esto:

 

Se puede hacer usando after element. revisa este enlace jsfiddle enter code here

No no hay.