CODEWITHSUNDEEP
htmlcss
aluknot
aluknot

Reputation: 504

CSS sprite with pseudo classes in all corners

I found this codepen which is using this sprite to add the corners:

ornaments

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

Upvotes: 0

Views: 73

Answers (3)

Abhitalks
Abhitalks

Reputation: 28417

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/

Upvotes: 1

Huski
Huski

Reputation: 978

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

enter image description here

Upvotes: 0

amespower
amespower

Reputation: 917

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;
}

Upvotes: 1

Related Questions