CSS功能区 - 如何在无视背景的同时制作透明的三角形

Question

我在图像上有一个色带叠加。色带的右侧应包含一个三角形。

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

当前，我已经将其设置为白色，以表明有一个形状，但我希望将白色设置为透明。

codepen在这里尝试

.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

可以使边界色透明，但是我改变了创建三角形的方式。我在包装纸内部添加了另一个Div作为三角形，并将其定位如何。检查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;
}

Answer 2

我不认为您可以使边界透明。它始终将主要对象的颜色置于后面。

我建议使边框颜色与背景图像相似。

border-right: solid 20px #998485;