Question

我在图像上有一个功能区覆盖图。功能区的右侧应包含三角形。

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

目前，我已将其设置为白色以显示已绘制的形状，但我希望将白色设置为透明。

.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;

CSS功能区 - 如何在忽略背景

2 个答案: