如何摆脱连接元素之间的透明空间？

Question

情况

我有一个包含 2 个背景图像的元素（手写 SVG）。每个图像代表一个具有 45 度边缘的角。图像具有固定宽度，元素具有相同宽度的（左和右）填充，因此元素的内容不会与角图像重叠。该元素包含一个子元素，它将用 background-color 属性填充透明度，因为子元素的父元素不能使用这些图像设置属性 background-color .

代码

元素的结构。

<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 文件之一（这是左边的一个）。

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

问题

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

它应该是这样的（Windows 8.1 Firefox 30）：

这就是我要修复的问题 (Windows 8.1 Chrome 36)：

另外（题外话）如果你对这个问题有任何了解请告诉我（Windows 8.1 Opera 12.16）：

链接

Answer 1

我检查了SVG文件，它们没有笔划，无法进一步优化。所以剩下的唯一旋钮是 tweak the sizing of the boxes so that things overlap:

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

请检查fiddle。

Answer 2

与其对元素使用 svg，不如使用 css 边框：

.wrapper {
  min-height: 10vw;
  border-left: 10vw solid transparent;
  border-right: 10vw solid transparent;
  border-top: 10vw solid #0080cb;
  position: relative;
}
.text {
  position: absolute;
  top: -10vw;
}

<div class="wrapper">
  <div class="text">Hello World!</div>
</div>

为了使矩形保持在顶部，您可以使用这种样式：

html,body{
  margin:0;padding:0;
  }
.wrapper{
  height:20px;
  width:100%;
  display:inline-block;
  background:#0080cb;
  position:relative;
  }
.text{
  position:absolute;
  width:70%;
  left:15%;
  z-index:5;
  display:inline-block;
  
  }
.wrapper:before, .wrapper:after{
  position:absolute;
  content:"";
  right:0;
  height:0;
  width:50%;
  top:20px;
  border-top:100px solid #0080cb;
  border-right:100px solid transparent;
  }

.wrapper:after{
  border-top:100px solid #0080cb;
  border-left:100px solid transparent; 
  border-right:0;
  left:0;
}

<div class="wrapper">
  <div class="text">Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!</div>
</div>

又一次转轮

这是另一个可能对您有用的实现：

.wrapper {
  height: 180px;
  width: 60%;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 5;
  overflow: hidden;
}
.blueshape {
  z-index: -3;
  height: 0px;
  position: absolute;
  left: -50px;
  right: -50px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 150px solid blue;
  padding-top: -50px;
  top: -50px;
}
.text{
  position:absolute;
  top:-100px;
  }

<div class="wrapper">
  <div class="blueshape">
    <div class="text">you can place text in here!</div>
  </div>
</div>

它使用的逻辑是：

    +-------------------------------+
    |                               |<--wrapper
    |                               |
    |                               |
    |                               |
    |                               |
    +-------------------------------+

    +-------------------------------+
  *-|-------------------------------|-+ <-- borders create this part
   \|                               |/ 
    |\                             /|
    | \___________________________/ | <-- set overflow hidden to wrapper
    |                               |
    +-------------------------------+

最终结果：

    |-------------------------------|
    |                               | 
     \                             /
      \___________________________/

如何摆脱连接元素之间的透明空间？

How to get rid transparent spaces between connecting elements?

css

cross-browser

情况

代码

问题

链接

又一次转轮