CSS sprite with pseudo classes in all corners - html

Question

I found this codepen which is using this sprite to add the corners:
with this code:
.lol-promo:before,
.lol-promo:after {
background: url("http://s.cdpn.io/800/ornaments-sprite.png") no-repeat;
content: "";
height: 40px;
position: absolute;
top: 0; left: 0;
width: 95px;
}
.lol-promo:after {
background-position: -95px 0;
left: auto; right: 0;
}
but in the codepen example is using only the top corners, how can i add the bottom corners too, to a simple div? i tried some things like repeating div:after part but is not working. I think its simple but i am not getting the point.
Thanks in advance

Answer 1

You can make use of the CSS3 border-image property.
You define how the image will get sliced and the width of the border. The slice rule takes four values each defining top, right, bottom and left corners of the box respectively. This way, you don't need any pseudo-elements.
Give your markup: <section class="lol-promo"></section>..
All you need is this CSS:
.lol-promo {
...
border-image: url('//s.cdpn.io/800/ornaments-sprite.png');
border-image-slice: 40 96 40 96;
border-image-width: auto;
}
The slice is based off the image that you referenced to in your question. For any other image, you need to tweak those values depending on how you want the border to appear.
Example Snippet:
.lol-promo {
height: 120px; width: 320px; margin: 16px; padding: 16px;
background-color: rgba(0,0,128,0.1);
border-image: url('//s.cdpn.io/800/ornaments-sprite.png');
border-image-slice: 40 96 40 96;
border-image-width: auto;
}
<section class="lol-promo">
<h2>header</h2>
<p>Lorem ipsum</p>
</section>
Example Fiddle: http://jsfiddle.net/abhitalks/05Lx7eea/

Answer 2

You can duplicate that div .lol-promo and flip the bottom ones vertically with transform:scale and absolute position them to the bottom right and left of your page. Here's a fiddle https://jsfiddle.net/az6juLkq/1/ with the full code.
.lol-promo.left,
.lol-promo.right {
position: absolute;
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}
.lol-promo.left{
bottom: 0; left: 0;
}
.lol-promo.right {
bottom: 0; right: 0;
background-position: -95px 0;
right: 0px;
}

Answer 3

In order to accomplish the flip, you can use a CSS transform. This may be done within the pseudo-element itself if you wish.
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
In the linked example, notice the border is technically border-top, yet it appears on the bottom.
CODEPEN: http://codepen.io/pohuski/pen/bVBpNw