Ramka wykonana w całości przy użyciu CSS, bez zbędnej grafiki.
Źródło: http://cssdeck.com/labs/fence-edge
HTML
<![CDATA[div jakiś_napis
]]>
CSS
<![CDATA[$size: 10px
$size-double: $size*2
html
height: 100%
body
height: 100%
margin: 0
text-align: center
&:after
content: ""
display: inline-block
vertical-align: middle
height: 100%
width: 0
div
display: inline-block
vertical-align: middle
line-height: 120px
width: 75%
padding: $size $size
font-size: 28px
font-family: Arial, sans-serif
color: #fff
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7)
border: $size solid transparent
border-width: $size 0
background-color: lightblue
background-color: hsla(0, 0%, 0%, 0)
$half: 50.5%
$color-top: transparent $half, lightblue $half
$color-bottom: transparent $half, skyblue $half
$top-left: linear-gradient(top left, $color-top)
$top-right: linear-gradient(top right, $color-top)
$bottom-left: linear-gradient(bottom left, $color-bottom)
$bottom-right: linear-gradient(bottom right, $color-bottom)
@include background-image(linear-gradient(lightblue, skyblue), $top-left, $top-right, $bottom-left, $bottom-right)
background-repeat: repeat, repeat-x, repeat-x, repeat-x, repeat-x
background-position: 0 0, $size 0, $size 0, $size 100%, $size 100%
background-size: auto auto, $size-double $size-double, $size-double $size-double, $size-double $size-double, $size-double $size-double
background-clip: padding-box, border-box, border-box, border-box, border-box
background-origin: padding-box, border-box, border-box, border-box, border-box
]]>
