Radio de borde de inserción con CSS3

Question

¿Hay forma de crear un radio de borde insertado con css3? (Sin imágenes)

necesito un radio de frontera como esto:

Answer 1

La mejor manera que he encontrado para lograr esto con todos los CSS y HTML (sin imágenes, etc.) es por using CSS3 gradients, por Lea Verou. De su solución:

div.round { 
    background: 
     -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px); 
    background: 
     -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px); 
    background: 
     -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), 
     -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px); 
    background-position: bottom left, bottom right, top right, top left; 
     -moz-background-size: 50% 50%; 
     -webkit-background-size: 50% 50%; 
    background-size: 50% 50%; 
    background-repeat: no-repeat; 
} 

El resultado neto es un conjunto de degradados transparentes con curvas. Consulte el completo JSFiddle para obtener una demostración y jugar con la apariencia que tiene.

Obviamente, esto depende de apoyo a rgba y gradient, y por lo tanto deben ser tratados como una mejora progresiva, o si es esencial para el diseño, se debe suministrar un repliegue basado en imágenes para navegadores antiguos (especialmente IE, que doesn' t admite gradient incluso hasta IE9).

Answer 2

No parece que eso es posible. Probé un radio de borde con un valor negativo solo para ver qué pasaría pero no tuvo ningún efecto.

Editar:

Incluso si se rompe la caja en partes más pequeñas, en algún momento, todavía habría que crear un rincón transparente inserción. La transparencia es la parte difícil que puede evitar que esto sea posible sin imágenes. Básicamente, tendría que ser capaz de hacer un círculo transparente con un bg circundante no transparente (y si eso es posible en CSS, me gustaría saber cómo :)

Si no necesita transparencia, hay formas de hacerlo.

Answer 3

No creo que sea posible si las esquinas tienen que ser transparentes, sin embargo, si se conoce el fondo, puede crear un div en cada esquina con un borde redondeado. Si esos divs reciben el mismo color de fondo que el fondo de la página, el efecto funcionará.

Ver mi ejemplo aquí http://jsfiddle.net/TdDtX/

#box { 
 
    position: relative; 
 
    margin: 30px; 
 
    width: 200px; 
 
    height: 100px; 
 
    background: #ccc; 
 
    border: 1px solid #333; 
 
} 
 

 
.corner { 
 
    position: absolute; 
 
    height: 10px; 
 
    width: 10px; 
 
    border: 1px solid #333; 
 
    background-color: #fff; 
 
} 
 

 
.top-left { 
 
    top: -1px; 
 
    left: -1px; 
 
    border-radius: 0 0 100% 0; 
 
    border-width: 0 1px 1px 0; 
 
} 
 

 
.top-right { 
 
    top: -1px; 
 
    left: 190px; 
 
    border-radius: 0 0 0 100%; 
 
    border-width: 0 0 1px 1px; 
 
} 
 

 
.bottom-left { 
 
    top: 90px; 
 
    left: -1px; 
 
    border-radius: 0 100% 0 0; 
 
    border-width: 1px 1px 0 0; 
 
} 
 

 
.bottom-right { 
 
    top: 90px; 
 
    left: 190px; 
 
    border-radius: 100% 0 0 0; 
 
    border-width: 1px 0 0 1px; 
 
}

<div id="box"> 
 
    <div class="corner top-left"></div> 
 
    <div class="corner top-right"></div> 
 
    <div class="corner bottom-left"></div> 
 
    <div class="corner bottom-right"></div> 
 
</div>

Answer 4

Se puede conseguir este efecto con los nuevos css3-border-imágenes (bueno, es imágenes, pero las escalas y sin problemas). Pero esto es bastante nuevo y aún no es muy compatible (bueno en todos los navegadores decentes (con prefijos) excepto IE, para ser precisos;)).

Un buen artículo sobre imágenes de borde en csstricks.

Browser Support

Answer 5

Hmm lo que pueda hacer uso de este pequeño truco aquí para crear Inset Border Radius

A continuación, para apoyar la transparencia se tendría que añadir probablemente otros bloques en el medio. Más o menos como la forma en que solían hacerse las viejas imágenes redondeadas; tener un lapso para cada esquina con la imagen transparente. Y se extiende a los lados y arriba para llenar el espacio vacío. En lugar de usar imágenes, puedes usar este truco para hacerlo en CSS.

Answer 6

body { 
 
    background: #fff; 
 
} 
 

 
.div{ 
 
position:relative; 
 
} 
 
.box { 
 
background: #f7f7f7; 
 
height: 178px; 
 
width: 409px; 
 
margin: 25px; 
 
/*padding: 20px;*/ 
 
position: relative; 
 
overflow: hidden; 
 
border: 1px solid #ccc; 
 
border-left: 0px; 
 
} 
 
.box:before { 
 
content: ""; 
 
display: block; 
 
background: #fff; 
 
position: absolute; 
 
top: -33px; 
 
left: -263px; 
 
width: 300px; 
 
height: 242px; 
 
border-radius: 300px; 
 
border: 1px solid #ccc; 
 
}

<div class="div"> 
 
<div class="box"></div> 
 
</div> 
 

 
</body> 
 
</html>

Ejemplo: http://jsfiddle.net/dVmX3/

Answer 7

Esto se puede conseguir por absolutamente posicionamiento de los elementos del círculo transparentes en las esquinas con las sombras de la caja. Utilicé una combinación de divs desbordados ocultos que contenían tramos, sombras de recuadros, bordes y pseudo selectores.

Eche un vistazo a mi example.

Este es el HTML básico y CSS que necesita para empezar:

a {display:inline-block; width:250px; height:100px; background:#ccc; border:2px solid #000; position:relative; margin:10px;} 
 

 
a div {position: absolute; top: 0; overflow: hidden; width: 15px; height: 100%;} 
 
a div:after {content:''; background:#000; width:2px; height:75px; position:absolute; top:12.5px;} 
 

 
a div:first-of-type {left: -14px;} 
 
a div:first-of-type:after {left:0;} 
 

 
a div:last-of-type {right: -14px;} 
 
a div:last-of-type:after {right:0;} 
 

 
a span {display:block; width:30px; height:30px; background:transparent; position:absolute; bottom:-20px; right:-20px; border:2px solid #000; border-radius:25px; box-shadow:0 0 0 60px #ccc;} 
 

 
a div:first-of-type span {left:-20px;} 
 
a div:first-of-type span:first-child {top:-20px;} 
 
a div:first-of-type span:last-child {bottom:-20px;} 
 

 
a div:last-of-type span {right:-20px;} 
 
a div:last-of-type span:first-child {top:-20px;} 
 
a div:last-of-type span:last-child {bottom:-20px;}

<a href=""> 
 
    <div> 
 
     <span></span> 
 
     <span></span> 
 
    </div> 
 

 
    <div> 
 
     <span></span> 
 
     <span></span> 
 
    </div> 
 
</a>

Answer 8

body { 
 
    background: #fff; 
 
} 
 

 
.div{ 
 
position:relative; 
 
} 
 
.box { 
 
background: #f7f7f7; 
 
height: 178px; 
 
width: 409px; 
 
margin: 25px; 
 
/*padding: 20px;*/ 
 
position: relative; 
 
overflow: hidden; 
 
border: 1px solid #ccc; 
 
border-left: 0px; 
 
} 
 
.box:before { 
 
content: ""; 
 
display: block; 
 
background: #fff; 
 
position: absolute; 
 
top: -33px; 
 
left: -263px; 
 
width: 300px; 
 
height: 242px; 
 
border-radius: 300px; 
 
border: 1px solid #ccc; 
 
}

<div class="div"> 
 
<div class="box"></div> 
 
</div> 
 

 
</body> 
 
</html>