| <html> |
| <head> |
| <style> |
| div { |
| border-width: 50px 0 0 0; |
| margin: 10px; |
| width: 50px; |
| height: 50px; |
| box-sizing: border-box; |
| background-color: gray; |
| border-image: url('resources/big-border-image-lines.png') 30 70 60 40; |
| border-image-repeat: round; |
| } |
| |
| .one { |
| width: 159px; |
| } |
| |
| .two { |
| width: 239px; |
| } |
| |
| .three { |
| width: 319px; |
| } |
| |
| .vertical { |
| border-width: 0 50px 0 0; |
| width: 50px; |
| display: inline-block; |
| } |
| </style> |
| </head> |
| <body> |
| <!-- Clip to remove the black borders of the source image --> |
| <div class="horizontal" style="width: 159px; -webkit-clip-path: inset(2px 120px 2px 6px);"></div> |
| <div class="horizontal" style="width: 239px; -webkit-clip-path: inset(2px 122px 2px 6px);"></div> |
| <div class="horizontal" style="width: 319px; -webkit-clip-path: inset(2px 220px 2px 6px);"></div> |
| |
| <div class="vertical" style="height: 159px; -webkit-clip-path: inset(4px 2px 4px 2px);"></div> |
| <div class="vertical" style="height: 239px; -webkit-clip-path: inset(122px 2px 4px 2px);"></div> |
| <div class="vertical" style="height: 319px; -webkit-clip-path: inset(220px 2px 6px 2px);"></div> |
| </body> |
| </html> |
