.rectangle {
    width: 420px;
    height: 143px;
    color: #fff;
    background: rgba(0,0.7);
    padding: 20px 0px 20px 10px;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.triangle {
    width: 0;
    height: 0;
    border-top: 92px solid transparent;
    border-bottom: 92px solid transparent;
    border-left:45px solid rgba(0,0.7);
    display: inline-block;
}

.block {
  width: 200px;
  height: 80px;
  background: red;
}

<div class="rectangle"></div><!--
--><div class="triangle"></div>
<div class="block"></div>

它从何而来？如何在没有负边距的情况下摆脱它(因为在某些屏幕上它们可能重叠).