Question

I want to achieve the effect described in the following question, but using CSS.
I remember seeing somewhere that this now can be done with HTML5, but now can’t find the property name.

Stretching an UIImage while preserving the corners

Answer 1

You’ll have to use 3 different images.

First, go into photoshop or Gimp or something and break the arrow image you have into 3 parts. The left side with the curve, and the right side with the arrow part. Save them as 3 different images.

Once you’ve got your images. Create one HTML image element:

<img src="img-middle.jpg" />

In your CSS, apply styling to the before and after pseudo-elements and add the two image bits that you don’t want stretched.

img:before {
    contents: '';
    background: url('img-left.jpg');
    height: 50px;
    width: 20px;
    position: absolute;
    left: -20px;
}

img:after {
    content: '';
    background: url('img-right.jpg');
    height: 50px;
    width: 40px;
    position: absolute;
    right: -40px;
}

Make sure you change the width, height, left and right values to match the width and height of your two image files. This CSS allows these bits of the image to be added on to the left and right sides, no matter how wide the element is stretched. It’s also cool since it’s only one element, so the CSS stays pretty clean except for the requirement of the empty content:”; property.

So then you can stretch your middle image element dynamically. Lets say you want he arrow to stretch, have some jQuery that animates the width of the element, then the middle part will stretch and the corners will stay intact since they’re technically not part of the original element, they’re just appended.

ETA: As for the method described in the objective-C related post, there’s no CSS property that breaks apart images like that unless it’s in some obscure webkit nightly build that I’ve never heard of. Your option here is to break apart the other two sides. You could also combine the left and right portions of your image into a sprite and use the background-position:; CSS property to select bits of the image so that way you’d only have two image file requests, as you want to keep those low to speed up page load time.