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

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

---

链接

• JS Fiddle
• Browser Stack

Answer 1

您可以使用css border：

，而不是将svg用于您的元素

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

---

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

---

轮子的另一个旋转

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

它使用的逻辑：

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

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

最终结果：

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

Answer 2

我检查过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;
}

请检查小提琴。