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

Question

我想达到以下问题中描述的效果，但使用 CSS。我记得在某处看到现在可以使用HTML5完成此操作，但现在找不到属性名称。

拉伸UII法师，同时保留角落

Answer 1

您必须使用 3 个不同的图像。

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

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

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

在 CSS 中，将样式应用于前后伪元素，并添加您不希望拉伸的两个图像位。

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

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

因此，您可以动态拉伸中间图像元素。假设你想让他的箭头拉伸，有一些jQuery来动画元素的宽度，然后中间部分将拉伸，角将保持不变，因为它们在技术上不是原始元素的一部分，它们只是附加的。

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

Answer 2

您可以创建一个元素，为其分配左右侧帽的伪元素，并使用应用于 width 属性的 CSS3 过渡来实现此效果。

我已经在 jsFiddle 上设置了一个工作演示来说明它是如何完成的。 这个演示使用背景颜色，但也可以使用图像(沿着中心元素的 X 轴重复(。

查看HTML5 Rocks Playground，您会发现一些有趣的片段，展示了CSS3和HTML5(自然(的强大功能，也可以将其用作快速参考。

Answer 3

你是说 CSS3 吗？

我认为border-image几乎就是你要找的。 它允许您获取单个图像并将其转换为元素的边框。

这有点难用，所以Mozilla做了一个很棒的所见即所得的编辑器：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator