Używanie CSS do tworzenia niestandardowych obramowań za pomocą rogów pokazujących

Question

Oto dla ciebie barmanista CSS. Chcę utworzyć obramowanie z zaledwie rogach wokół pola tekstowego, jak na zdjęciu poniżej:

myślałem o tworzeniu Div 2 prostokąt, jeden z niebieską obwódką, a drugi biały, a następnie ich nakładania, ale nie wydawało się to bardzo eleganckie (np. nie działałoby dobrze, gdybym chciała zmienić tło).

Jakieś pomysły, jak inaczej mogę to zrobić?

EDIT:

Oto HTML:

<div class="blue white1 white">text</div> 

.blue { 

border: blue 4px solid; 
etc.. 
} 

Answer 1

Korzystanie jeden div i jeden węzeł kierowania. http://jsfiddle.net/eCEds/2/

HTML:

<div class="blue white1 white"><p>Text</p></div> 

CSS:

.blue {position:relative;width:400px;height:300px;} 
.blue:before, .blue:after, .blue>:first-child:before, .blue>:first-child:after { 
    position:absolute; 
    width:80px; height: 80px; 
    border-color:blue; 
    border-style:solid; 
    content: ' '; 
} 
.blue:before {top:0;left:0;border-width: 4px 0 0 4px} 
.blue:after {top:0;right:0;border-width: 4px 4px 0 0} 
.blue>:first-child:before {bottom:0;right:0;border-width: 0 4px 4px 0} 
.blue>:first-child:after {bottom:0;left:0;border-width: 0 0 4px 4px} 

Answer 2

Czy masz na myśli coś takiego: http://jsfiddle.net/FlameTrap/F5bC6/

HTML

<div class="text"> 
    <span class="corner TL"></span> 
    <span class="corner TR"></span> 
    <span class="corner BL"></span> 
    <span class="corner BR"></span> 
    <div class="text">Text</div> 
</div> 

CSS

.text { 
    background: #fff; 
    width: 300px; 
    height: 200px; 
    position: relative; 
    z-index: 3; 
} 
.corner { 
    position: absolute; 
    background: blue; 
    width: 20px; 
    height: 20px; 
    z-index: 2; 
} 
.TL { 
    top: -10px; 
    left: -10px 
} 
.TR { 
    top: -10px; 
    right: -10px 
} 
.BL { 
    bottom: -10px; 
    left: -10px 
} 
.BR { 
    bottom: -10px; 
    right: -10px 
} 

Answer 3

Coś jak to będzie działać i daje mniejsze problemy w starszych przeglądarkach do bagażnika:

<style> 
.blue { 
    width: 500px; 
    height: 500px; 
    position: relative; 
} 
.corner { 
    position: absolute; 
    border-color: blue; 
    width: 30px; 
    height: 30px; 
} 
.tl { 
    top: 0; 
    left: 0; 
    border-top: 2px solid; 
    border-left: 2px solid; 
} 
.tr { 
    top: 0; 
    right: 0; 
    border-top: 2px solid; 
    border-right: 2px solid; 
} 

.br { 
    bottom: 0; 
    right: 0; 
    border-bottom: 2px solid; 
    border-right: 2px solid; 
} 

.bl { 
    bottom: 0; 
    left: 0; 
    border-bottom: 2px solid; 
    border-left: 2px solid; 
} 
</style> 

<div class="blue"> 
    <div class="tl corner"></div> 
    <div class="tr corner"></div> 
    <div class="bl corner"></div> 
    <div class="br corner"></div> 
</div> 

Answer 4

.text 
 
{ 
 
    border: 1px solid #00f; 
 
    height: 200px; 
 
    position: relative; 
 
    width: 200px; 
 
} 
 
.text:after 
 
{ 
 
    position:absolute; 
 
    top: 10%; 
 
    height: 80%; 
 
    content: ""; 
 
    width: 99%; 
 
    left: -3px; 
 
    border-left: 5px solid #fff; 
 
    border-right: 5px solid #fff; 
 
} 
 
.text:before 
 
{ 
 
    position:absolute; 
 
    left: 10%; 
 
    height: 99%; 
 
    content: " "; 
 
    width: 80%; 
 
    top: -3px; 
 
    border-top: 5px solid #fff; 
 
    border-bottom: 5px solid #fff; 
 
}

<div class="text">test test gfgfgf gfg f</div>

To jest mój wariant.

Answer 5

Coś takiego można uzyskać za pomocą gradientów CSS i wielu środowisk: . Ale prawdopodobnie tło SVG będzie bardziej odpowiednie dla takich przypadków.