Css 如何消除连接元素之间的透明空间？ 处境

我有一个带有2个背景图像的元素（手写SVG）。每个图像都表示一个具有45度边缘的角。图像具有固定宽度，元素具有相同宽度的（左和右）填充，因此元素的内容不会与角图像重叠。该元素包含一个子元素，该子元素将用

背景色

属性填充透明度，因为子元素的父元素不能用这些图像设置属性

背景色

---

代码 元素的结构

<div class="shape">
    <div class="content">
    </div>
</div>

.shape {
    background:url("http://imgh.us/left.svg") no-repeat scroll left bottom,
               url("http://imgh.us/right_1.svg") no-repeat scroll right bottom;
    background-size:10vw 10vw;
    min-height:10vw;
    padding:0 10vw;
}
.content {
    min-height:10vw;
    background-color:#0080cb;
}

使用的两个SVG文件之一（这是左边的一个）

---

问题: 如何消除连接元素之间的透明空间？它似乎没有出现在FireFox上，但其他浏览器根本不喜欢它

这就是它的外观（Windows 8.1 Firefox 30）：

这就是我想要解决的问题（Windows 8.1 Chrome 36）：

另外（离题）如果您知道有关此问题的任何信息，请告诉我（Windows 8.1 Opera 12.16）：

---

链接

---

我已经检查了SVG文件，它们无法进一步优化，因为它们没有笔划。因此，唯一剩下的旋钮是：

---

请检查小提琴。

您可以使用css边框，而不是将svg用于元素：

.wrapper{
最小高度：10vw；
左边框：10vw实心透明；
右边框：10vw实心透明；
边框顶部：10vw实心#0080cb；
位置：相对位置；
}
.文本{
位置：绝对位置；
前-10vw；
}

你好，世界！

这不会解决问题，只会让事情变得更糟。您还将获得透明的空间（仅在没有大值的情况下）并且角看起来非常难看。因此，它在跨浏览器时看起来肯定不好看，而且（很抱歉，我没有在《赏金》中提到它）在所有分辨率上看起来都不一样。是的，我确认，如果缩放级别改变，它在所有情况下都不起作用。然而，我无法复制所附图片中显示的内容。还有别的主意吗？你有没有试着摆弄背景位置？它必须是svg吗？或者css解决方案可以吗？@jbutler483不必，但是如果使用css，移动的边缘（45度）会有点模糊/不锐化。您的第一个片段的

.wrapper

css看起来很有希望，这样可以避免“将各个部分粘在一起”，因为它是一个整体（不幸的是，在某些移动设备上不是这样）。您的第二个代码片段显示了它是如何静态（高度）完成的，上面有一个矩形。所以我决定玩弄它，这导致了一个小问题。文本的对齐方式在每个分辨率上都不相同。我想知道你为什么使用

top:-10vw在第一个代码段，而不是
页边距顶部：-10vw
和我一样，它的兼容性如何？@Fleuv:你能告诉我你使用的是哪款手机浏览器（和版本）吗<代码>顶部

已使用，因为我已将元素

绝对地

。在大多数android设备的默认浏览器中，它与html5/css3设备非常兼容（更多信息请参见）。它显示了错误的

边框宽度
形状与文本高度相同。或者像我的第二张截图一样，它在所有边缘附近都有小的透明空间。我用我的JSFIDLE来测试它。不管怎样，它在所有pc上都很好用，我认为现在已经足够好了。我将在我的网页设计中实施这一策略，以便在bug上测试。@Fleuv:你能澄清到底是什么错吗？老实说，我不能100%确定我“需要改进”的部分是什么？
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0 L100 0 L100 100Z" fill="rgb(0,128,203)"/>
</svg>

.shape {
  background:url("http://imgh.us/left.svg") no-repeat scroll left bottom,
           url("http://imgh.us/right_1.svg") no-repeat scroll right bottom;
  background-size:10vw 10.2vw;
  min-height:10vw;
  padding:0 9.99vw;
}