Html 如何用css制作响应三角形

我有一个用bootstrap制作的网格，一列用于图像，一列用于文本。我必须在文本列的左侧创建一个三角形，它与图像重叠，并且它必须是响应的。根据容器的高度，它必须始终在中间。我该怎么办

<div class="row no-gutters">
    <div class="col-6">
      <img src="http://placehold.it/200x200" class="w-100" alt="">
    </div>
    <div class="col-6 ">
      <p>lorem ipsum dolor</p>
    </div>
</div>

同侧阴唇

---

结果应该是这样的：

可以在CSS中创建一个带有三角形所需宽度的边框的0x0 div来创建三角形。您需要将该div的边框颜色的除一侧以外的所有颜色都设置为透明。下面是一个例子：

.triangle{
  height: 0px;
  width: 0px;
  border: 20px solid transparent;
  border-right: 25px solid white;
  position: absolute;
  right: 0;
  top: 90px;
}

在这里，我创建了您想要的作为示例。

的可能副本