<!DOCTYPE html>
<style>
    #container {
      font: 10px/1 Ahem;
      width: 40px;
      position: relative;
    }

    #left-triangle, #right-triangle {
      position: absolute;
      top: 0px;
      width: 20px;
      height: 20px;
      background-color: green;
    }

    #left-triangle {
      left: 0px;
      -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
    }

    #right-triangle {
      right: 0px;
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
    }

    .top {
      width: 10px;
      height: 10px;
    }

    .bottom {
      width: 20px;
      height: 10px;
    }

    .left {
      float: left;
    }

    .right {
      float: right;
    }
</style>
<body>
    <p>The black rectangles should not overlap the green trianges.</p>
    <div id="container">
        <div id="left-triangle"></div>
        <div id="right-triangle"></div>
        <div class="left top"></div>
        <div class="right top"></div>
        <div>xx</div>
        <div class="left bottom"></div>
        <div class="right bottom"></div>
        <div>xx</div>
    </div>
</body>