CSS Ribbon - 如何在忽略背景的情况下制作透明三 Angular 形

Question

我在图像上覆盖了一条色带。 功能区的右侧应包含一个三 Angular 形。

我已经能够通过伪元素创建三 Angular 形，但无法弄清楚如何设置颜色以忽略父元素的背景颜色。

目前，我已将其设置为白色以表明绘制了一个形状，但我希望将白色设置为透明。

Codepen attempt here

.homefeed-img-container {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  max-height: 458px;
  height: auto;
  width: 100%;
  background-color: #f2f2f2;
}

.homefeed-img {
  min-height: 200px;
  width: 100%;
  vertical-align: top;
  object-fit: cover;
}

.home-img-time-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: green;
  height: 45px;
  padding: 10px 15px;
  line-height: 1.8;
  color: white;
  width: 150px;

  &:before, &:after {
    display: block;
    position: absolute;
    width: 20px;
    height: 45px;
    top: 0;
    right: 0;
    content: "";
  }

  &:before {
    border-top: solid 22.5px transparent;
    border-right: solid 20px #fff;
    border-bottom: solid 22.5px transparent;
  }
}

Answer 1

把border-color做成透明是可以的，但是我改变了创建三 Angular 形的方式。我在包装器内添加了另一个 div 作为三 Angular 形并将其放置在适合的位置。检查 codepen 脚本以查看结果。

http://codepen.io/LevelZwo/pen/bepPvd

HTML:

<div class="home-img-time-overlay"> 
   2 minutes ago
   <div class="triangle"></div>
</div>

CSS:

.home-img-time-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: green;
  height: 45px;
  padding: 10px 15px;
  line-height: 1.8;
  color: white;
  width: 150px;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: green transparent transparent transparent;
  position:absolute;
  top:0;
  right:-20px;
}