CSS: mostrar solo el borde de la esquina

Me pregunto si es posible en CSS o Jquery hacer un borde pero solo para esquina. Algo como esto:

**** **** * * * * CONTENT * * * * **** **** 

Yo usaría divs superpuestos.

Uno con esquinas cuadradas. Y el Otro con una esquina redondeada (para que no oculte las esquinas de la primera).

 
#div1 { position:absolute; top:9px; left:9px; height:100px; width:100px; background-color:white; border:1px solid black; } #div2 { position:relative; top:-1px; left:-1px; height:102px; width:102px; background-color:white; border-radius: 15px; }

http://jsfiddle.net/y3EfP/

Resultado:

enter image description here


Una solución mejorada proporcionada por @ web-tiki:

http://jsfiddle.net/webtiki/y3EfP/147/

Asumiendo

CONTENT

y ese CONTENT incluye al menos un nodo HTML.

 #content {position:relative} #content:before, #content:after, #content>:first-child:before, #content>:first-child:after { position:absolute; content:' '; width:80px; height: 80px; border-color:red; /* or whatever colour */ border-style:solid; /* or whatever style */ } #content:before {top:0;left:0;border-width: 1px 0 0 1px} #content:after {top:0;right:0;border-width: 1px 1px 0 0} #content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0} #content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px} 

Aquí hay un violín

SVG

Esta es otra gran alternativa si ahora quiere comenzar a usar vectores para permitir una gran capacidad de respuesta.

       

Aquí hay un par de métodos para crear este efecto sin usar ningún elemento extra pseudo / real . Una cosa a tener en cuenta es que ambos enfoques solo funcionarían en navegadores modernos porque usan propiedades CSS3.

Usar border-image : La propiedad border-image hace que sea muy fácil crear tales efectos. El enfoque es el siguiente:

  • Crea una imagen transparente que tenga bordes justo en la esquina como aquí .
  • Establezca esta imagen como border-image-source y deje que el navegador se encargue del rest 🙂 Dado que el valor predeterminado para border-image-repeat es stretch , el navegador estirará la imagen original para que se ajuste al contenedor incluso si el contenedor se convierte grande.
  • El valor establecido para la propiedad border-image-width determina qué tan gruesos son los bordes.
 .bordered { background-color: beige; border-image-source: url("http://i.stack.imgur.com/s2CAw.png"); border-image-slice: 1; border-image-width: 5px; } .square { height: 150px; width: 150px; } .large-square { height: 350px; width: 350px; } /* Just for demo */ div { margin-bottom: 10px; } 
 

Podría colocar absolutamente cuatro

s, uno en cada esquina, cada uno con los dos bordes apropiados.

HTML

 
content goes here

CSS

 .corners { position: relative; width: 100px; /* for demo purposes */ padding: 10px; } .top, .bottom { position: absolute; width: 10px; height: 10px; } .top { top: 0; border-top: 1px solid; } .bottom { bottom: 0; border-bottom: 1px solid; } .left { left: 0; border-left: 1px solid; } .right { right: 0; border-right: 1px solid; } 

clip-path

Usando dos div’s uno encima del otro.
Y agregando un clip-path a div que en la parte posterior puede crear un efecto border-like.

 .wrapper { display: inline-block; background-color: black; line-height: 0px; -webkit-clip-path: polygon(0% 100%, 30% 100%, 30% 70%, 70% 70%, 70% 100%, 100% 100%, 100% 70%, 70% 70%, 70% 30%, 100% 30%, 100% 0%, 70% 0%, 70% 30%, 30% 30%, 30% 0%, 0% 0%, 0% 30%, 30% 30%, 30% 70%, 0% 70%); clip-path: polygon(0% 100%, 30% 100%, 30% 70%, 70% 70%, 70% 100%, 100% 100%, 100% 70%, 70% 70%, 70% 30%, 100% 30%, 100% 0%, 70% 0%, 70% 30%, 30% 30%, 30% 0%, 0% 0%, 0% 30%, 30% 30%, 30% 70%, 0% 70%); } .wrapper {} .wrapper div { display: inline-block; height: 150px; width: 150px; margin: 10px; background-color: white; } 
 

Encontré esta pregunta, pero no estaba satisfecho con el enfoque de radio límite: como estaba usando bordes más gruesos, el efecto no fue tan bueno como quería. Logré crear otra solución, sin imágenes y sin ningún margen adicional:

  .box { /* fake border */ position: relative; overflow: hidden; box-shadow: inset 0px 0px 0px 10px green; padding: 1em; } .box:before { /* this element will hide the fake border on the top and bottom */ content:''; display: block; position: absolute; border-top:10px solid white; border-bottom:10px solid white; /* height = border-width x2 */ height:calc(100% - 20px); top:0; /* width = size of fake-border x2 */ width: calc(100% - 36px); /* left = size of fake-border */ left:18px; } .box:after { /* this element will hide the fake border on the left and right */ /* the rules for width, heigth, top and left will be the opposite of the former element */ display: block; position: absolute; content:''; border-right:10px solid white; border-left:10px solid white; height:calc(100% - 36px); width: calc(100% - 20px); top:18px; left: 0; } 

Aquí hay un JSFiddle con este ejemplo: https://jsfiddle.net/t6dbmq3e/ Espero que ayude.

Puede lograr eso usando múltiples degradados lineales como una imagen de fondo.

 div { width: 100px; height: 100px; margin: 20px; background: linear-gradient(to right, black 4px, transparent 4px) 0 0, linear-gradient(to right, black 4px, transparent 4px) 0 100%, linear-gradient(to left, black 4px, transparent 4px) 100% 0, linear-gradient(to left, black 4px, transparent 4px) 100% 100%, linear-gradient(to bottom, black 4px, transparent 4px) 0 0, linear-gradient(to bottom, black 4px, transparent 4px) 100% 0, linear-gradient(to top, black 4px, transparent 4px) 0 100%, linear-gradient(to top, black 4px, transparent 4px) 100% 100%; background-repeat: no-repeat; background-size: 20px 20px; } 
 

Ok, como soy una mierda de CSS, creo que no podré hacerlo yo solo pero lo hago y parece que funciona:

 

Y parece estar funcionando 😉 Lo siento por molestar y gracias por su ayuda.

No hay una manera limpia de limitar las esquinas, pero podrías intentar imitar el efecto. Algo como esto quizás: http://jsfiddle.net/RLG4z/

 
content
#corners { width: 200px; height: 50px; border-radius: 10px; background-color: red; margin: 10px; } #content { background-color: white; border-radius: 15px; height: 30px; padding: 10px; }

debido a la diferencia en el radio del borde, el color de fondo del div subyacente muestra un valle, dando el efecto de un borde en las esquinas.

Personalmente creo que trabajaría con imágenes de fondo para lograr esto, para un mejor control del resultado.

Esta es tu foto:

HTML:

 
****
****
*
*
*
*

CONTENT

*
*
*
*
****
****

y CSS:

 .shell { width: 200px;} .left{ float:left; } .right{float:right; } .clear { clear: both; line-height: 10px; } .content { line-height: 10px; text-align: center; } 

Aquí hay una versión modificada de la respuesta anterior, esta versión tiene el padre posicionado relativo y el niño posicionado de manera absoluta para que podamos agregar el efecto de estacionario.

http://jsfiddle.net/3jo5btxd/

 HTML: 
CSS: #div1 { position: relative; height: 100px; width: 100px; background-color: white; border: 1px solid transparent; } #div2 { position: absolute; top: -2px; left: -2px; height: 84px; width: 84px; background-color: #FFF; border-radius: 15px; padding: 10px; } #div1:hover { border: 1px solid red; }

Aquí hay algo que hice recientemente con contenido centrado tanto vertical como horizontalmente.

El HTML

 
© Copyright 2015 - Company name

St Winifrids St,
The Saints, Harrogate HG1 5PZ, UK

El CSS

 .c-frame-wrapper { width: 250px; height: 100px; font-size:11px; color: $dark-grey-lighten-70; /* center align x axis */ right: auto; left: 50%; transform: translateX(-50%); } .c-frame-tl { top: 0; left: 0; position: absolute; width:10px; height:10px; border-width: 3px; border-style: solid none none solid; border-color: #eb0000; } .c-frame-tr { top: 0; right: 0; position: absolute; width:10px; height:10px; border-width: 3px; border-style: solid solid none none; border-color: #eb0000; } .c-frame-br { bottom: 0; right: 0; position: absolute; width:10px; height:10px; border-width: 3px; border-style: none solid solid none; border-color: #eb0000; } .c-frame-bl { bottom: 0; left: 0; position: absolute; width:10px; height:10px; border-width: 3px; border-style: none none solid solid; border-color: #eb0000; } .c-frame-content { width:100%; text-align: center; /*center alignment x and y*/ position: absolute; top: 50%; left: 50%; bottom: auto; right: auto; transform: translate(-50%,-50%); } 

JSFiddle

Creo que la mejor solución es el método de pseudo elemento. Agradable y limpio y no contamina el html con (demasiados) elementos extra.

Creé este sass mixin usando el código anterior, para una solución de copiar y pegar:

 @mixin corner-borders($corner-width: 1px, $corner-size: 5px, $color-border: grey, $color-background: white) { position: relative; border: $corner-width solid $color-border; background-color: $color-background; &::before { content: ""; z-index: 0; position: absolute; top: -$corner-width; bottom: -$corner-width; left: $corner-size; right: $corner-size; background-color: $color-background; } &::after { content: ""; z-index: 0; position: absolute; top: $corner-size; bottom: $corner-size; left: -$corner-width; right: -$corner-width; background-color: $color-background; } } 

Entonces puedes usarlo así:

html:

 
Content

SCSS

 .border { @include corner-borders; } .content { position: relative; z-index: 1; } 

Necesita el índice Z y la posición relativa allí para que el contenido se encuentre encima de los pseudo elementos.

Hice una demostración de codepen aquí: http://codepen.io/timrross/pen/XMwVbV

enter image description here

 .box{ background-color: aquamarine; position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 300px; height: 200px; border: 30px solid black; } .box::before{ content:''; position: absolute; top:25px; left:-30px; height: 150px; width: 360px; background: aquamarine; } .box::after{ content:''; position: absolute; top:-30px; left:30px; height: 260px; width: 240px; background: aquamarine; }