Stretching an Image while preserving the corners in HTML5 - html

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.

Answer 2

you can create an element, assign pseudo elements to it for the left and right side caps, and use a CSS3 transition applied to the width property in order to achieve this effect.
i've set up a working demo on jsFiddle to illustrate how it's done. this demo uses background colors, but one could use images as well (repeating along the X axis for the center element).
check out the HTML5 rocks playground, you'll find some fascinating snippets demonstrating the power of CSS3 and HTML5 (naturally) and can use it as a quick reference as well.

Answer 3

Did you mean CSS3?
I think border-image is pretty much what you're looking for. It lets you take a single image and transform it into the border of an element.
It's kinda hard to work with, so Mozilla made a wonderful WYSIWYG editor:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator