CSS: mostra solo il bordo dell’angolo

Mi chiedo se sia ansible in CSS o Jquery creare un bordo ma solo per angolo. Qualcosa come questo:

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

Vorrei usare div sovrapposti.

Uno con angoli quadrati. E l’altro con l’angolo arrotondato (quindi non nasconde gli angoli del primo).

 
#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/

Risultato:

inserisci la descrizione dell'immagine qui


Una soluzione avanzata fornita da @ web-tiki:

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

Supponendo che

CONTENT

e che CONTENT includa almeno 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} 

Ecco un violino

SVG

Questa è un’altra grande alternativa se ora vuoi iniziare a utilizzare i vettori per consentire una grande reattività.

       

Ecco un paio di metodi per creare questo effetto senza usare alcun pseudo / reale elemento aggiuntivo . Una cosa da notare è che entrambi questi approcci funzionerebbero solo nei browser moderni perché utilizzano le proprietà CSS3.

Usare border-image : la proprietà border-image rende piuttosto facile creare tali effetti. L’approccio è il seguente:

  • Crea un’immagine trasparente che ha i bordi proprio nell’angolo come qui .
  • Imposta questa immagine come origine dell’immagine di border-image-source e lascia che il browser si occupi del resto 🙂 Poiché il valore predefinito per border-image-repeat è stretch , il browser estenderebbe l’immagine originale per adattarla al contenitore anche se il contenitore diventa grande.
  • Il valore impostato per la proprietà border-image-width determina quanto sono spessi i bordi.
 .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; } 
 

È ansible posizionare in modo assoluto quattro

s, uno in ciascun angolo, ciascuno con i due bordi appropriati.

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-percorso

Usando due div uno sopra l’altro.
E aggiungendo un percorso di ritaglio per div che nel retro puoi creare un effetto simile al bordo.

 .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; } 
 

Ho trovato questa domanda, ma non ero soddisfatto dell’approccio border-radius: poiché stavo usando bordi più spessi, l’effetto non era buono come volevo. Sono riuscito a creare un’altra soluzione, senza immagini e senza alcun markup extra:

  .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 formsr 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; } 

Ecco un JSFiddle con questo esempio: https://jsfiddle.net/t6dbmq3e/ Spero che aiuti.

Puoi ottenerlo usando più gradienti lineari come immagine di sfondo.

 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 come faccio a succhiare in CSS penso che non sarò in grado di farlo da solo ma lo faccio e sembra funzionare:

 

E sembra funzionare 😉 Scusa per il disturbo e grazie per il tuo aiuto.

Non esiste un modo css pulito per dare agli angoli un bordo, ma puoi provare a imitare l’effetto. Qualcosa di simile forse: 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; }

a causa della differenza nel raggio del bordo, il colore di sfondo della div sottostante mostra una depressione, dando l’effetto di un bordo agli angoli.

Personalmente penso che avrei lavorato con le immagini di sfondo per ottenere questo, per un migliore controllo del risultato.

Questa è la tua foto:

HTML:

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

CONTENT

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

e CSS:

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

Ecco una versione modificata della risposta di cui sopra, questa versione ha un genitore posizionato e un bambino posizionato in modo assoluto in modo che possiamo aggiungere l’effetto hover.

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; }

Ecco qualcosa che ho fatto di recente con il contenuto centrato sia verticalmente che orizzontalmente.

L’HTML

 
© Copyright 2015 - Company name

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

Il 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

Penso che la soluzione migliore sia il metodo pseudo elemento. Bello e pulito e non inquina l’html con (troppi) elementi extra.

Ho creato questo sass mixin usando il codice sopra, per una soluzione di copia e incolla:

 @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; } } 

Quindi puoi usarlo in questo modo:

html:

 
Content

SCSS

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

Hai bisogno dello z-index e della posizione relativa, quindi il contenuto si trova in cima agli pseudo elementi.

Ho fatto una demo di codepen qui: http://codepen.io/timrross/pen/XMwVbV

inserisci la descrizione dell'immagine qui

 .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; }