拉伸图像，同时保留HTML5中的角点

我想实现下面问题中描述的效果，但是使用CSS。 我记得在某个地方看到，现在可以用HTML5实现这一点，但现在找不到属性名

---

您必须使用3种不同的图像

首先，进入photoshop或Gimp或其他程序，将箭头图像分成3部分。左侧为曲线，右侧为箭头部分。将它们另存为3个不同的图像

一旦你有了你的图像。创建一个HTML图像元素：

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

确保更改宽度、高度、左侧和右侧值以匹配两个图像文件的宽度和高度。该CSS允许将图像的这些位添加到左侧和右侧，而不管元素拉伸到多宽。它也很酷，因为它只是一个元素，所以CSS保持相当干净，除了空内容的要求：''；财产

因此，您可以动态拉伸中间图像元素。假设您希望箭头拉伸，使用一些jQuery设置元素宽度的动画，然后中间部分将拉伸，角点将保持完整，因为从技术上讲，它们不是原始元素的一部分，只是附加了

---

ETA：至于objective-C相关文章中描述的方法，没有CSS属性可以像那样分解图像，除非它是在我从未听说过的晦涩的webkit夜间构建中。你在这里的选择是分开其他两个方面。您还可以将图像的左右部分组合成精灵，并使用背景位置：；CSS属性来选择图像的位，这样您就只有两个图像文件请求，因为您希望将这些请求保持在较低的水平以加快页面加载时间。

您可以创建一个元素，为其分配用于左侧和右侧封口的伪元素，并使用应用于width属性的CSS3转换来实现此效果

我设置了一个示例来说明它是如何完成的。本演示使用背景色，但也可以使用图像（沿X轴重复中心元素）

看看，你会发现一些有趣的片段，展示了CSS3和HTML5的强大功能（自然），也可以作为快速参考。

你是说CSS3吗

我认为

边框图像

正是您想要的。它允许您拍摄单个图像并将其转换为元素的边框

使用它有点困难，因此Mozilla制作了一个出色的WYSIWYG编辑器：

---

这是一个很好的答案，但不适合我的情况，因为我需要图像的大小是动态的，并且当你有正确的东西时：-40px；它不能动态缩放。哦，所以你需要左/右部分也是动态的？所以它适用于具有相同CSS的任何大小的图像？我有3个图像：左一个我想要的（宽度自动和高度100%），中一个（宽度100%和高度100%），右一个（宽度自动和高度100%）。现在的问题是，中间的一个重叠的权利和左侧，我不知道如何才能防止重叠…忘记添加图像设置为背景图像只添加位置：相对；左-100%；左一位，位置：相对；右图：-100%；在右侧。如果使用边界半径，请尝试使用3个图像，一个用于左上下角，一个用于中间拉伸但不重叠角图像，第三个图像用于右上下角。所有这些都需要有动态高度，当然还有动态宽度。如果使用单个图像作为侧盖，则无法实现动态高度。但我最初的问题是关于HTML5中的新选项，我记得看到过，但现在找不到。谢谢，但这不是我问题的答案。这是HTML5，可能与图像一起使用。我相信这是解决这个问题的一个可能办法。

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