Created
September 18, 2012 19:30
-
-
Save gabrielso/3745276 to your computer and use it in GitHub Desktop.
Box in brackets border
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { /* optional, must subtract .border width by his own border-width if absent */ | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .border { | |
| background: transparent; | |
| border-right: 80px solid black; | |
| border-left: 80px solid black; | |
| position: relative; | |
| width: 502px; | |
| } | |
| .content { | |
| background: rgb(204,204,255); | |
| left: -79px; /* .border border-width -1px */ | |
| position: absolute; | |
| top: 1px; | |
| width: 500px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <title>Box-in-brackets</title> | |
| <meta charset="utf-8"> | |
| <meta name="author" content="Gabriel Oliveira (@gabaiel)"> | |
| <meta name="viewport" content="width=device-width"> | |
| <link rel="stylesheet" href="index.css" media="screen"> | |
| </head> | |
| <body> | |
| <section class="border"> | |
| <section class="content"> | |
| <!-- Your content here --> | |
| </section> | |
| </section> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment