redondeados - Invierte la esquina redondeada en CSS
input redondeado bootstrap (10)
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);
}
<div id="aux-container"></div>
Además, eche un vistazo a http://www.html5rocks.com/en/tutorials/masking/adobe/ , que describe cómo lograr resultados similares utilizando mask-box-image .
Tengo un código CSS:
-moz-border-radius-topleft:50px;
Obtengo el resultado:
¿Hay alguna posibilidad de dar como este?
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.
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
No no hay.
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 .
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 */
}
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
Se puede hacer usando after element. revisa este enlace jsfiddle enter code here
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
<div><img src="https://s3.amazonaws.com/resized-images-new/23292454-E6CD-4F0F-B7DA-0EB46BC2E548" /></div>
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
html
<div class="inner-round"></div>
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);
}
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%;}
<svg viewbox="0 0 10 10">
<path d="M9 1 V9 H1 V3 Q3 3 3 1" fill="#fff"/>
</svg>
En este ejemplo, utilizo una curva de bezier cúbico para el borde redondo invertido.
Con este enfoque, también puede llenar la forma con una imagen o degradado:
body{background:url(''http://i.imgur.com/RECDV24.jpg'');background-size:cover;}
svg{width:30%;}
<svg viewbox="0 0 10 6.7">
<defs>
<clipPath id="clip">
<path d="M9 1 V6.7 H1 V3 Q3 3 3 1" fill="#fff"/>
</clipPath>
</defs>
<image xlink:href="http://i.imgur.com/qi5FGET.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#clip)"/>
</svg>
en realidad hay una forma, como esta:
<div style="background-color: red;height: 12px; width: 12px;">
<div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
</div>
</div>
pero como @Domenic dice que necesitarás un fondo sólido, de lo contrario obtendrás esto:
<div style=" background-color:#666">
<div style="background-color: red;height: 12px; width: 12px;">
<div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
</div>
</div>