使用伪：after-element创建一个三角形颜色叠加层

Question

我正在尝试使用

之类的纯CSS创建形状颜色叠加层

但是，我不太清楚如何创建三角形。我假设我必须使用CSS伪:after元素。但是，到目前为止，我尝试过的所有解决方案似乎都没有用，也没有任何响应。

如何重新创建如图所示的形状颜色叠加层？预先感谢！

我的代码：

    html, body {
      width: 100%;
      height: 100%;
    }

    .bg-img {
      width: 100%;
      height: 100%;
      background-blend-mode: multiply;
      background-color: initial;
      background-image: url("http://unsplash.it/1200x800"), linear-gradient(90deg,rgba(43,135,218,0) 50%,rgba(41,196,169,0.61) 50%);
      background-size: cover;
    }

Code Snippet

Answer 1

.bg-img { width: 100%; height: 400px; background-image: url("http://unsplash.it/1200x800"); background-size: cover; position: relative; }
.bg-img:before { content: ''; display: block; position: absolute; top: 0; bottom: 0; right: auto; left: 50%; border: 200px solid rgba(63, 81, 181, 0.40); border-left: 0; border-top-color: transparent; border-bottom-color: transparent; margin-left: -200px; }
.bg-img:after { content: ''; display: block; position: absolute; top: 0; bottom: 0; right: 0; left: 50%; background-color: rgba(63, 81, 181, 0.40); }

请检查是否可以。

Answer 2

您可以考虑使用多个背景层来实现此目的：

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.bg-img {
  height: 100%;
  background-blend-mode: multiply;
  background: 
    url("http://unsplash.it/1200x800") center/cover, 
   linear-gradient(rgba(41, 196, 169, 0.61),rgba(41, 196, 169, 0.61)) right/50% 100%,
   linear-gradient(to bottom right,transparent 49.8%,rgba(41, 196, 169, 0.61) 50%) calc(50% - 50px) 0/100px 50.05%,
   linear-gradient(to top right,   transparent 49.8%,rgba(41, 196, 169, 0.61) 50%) calc(50% - 50px) 100%/100px 50.05%;
  background-repeat: no-repeat;
}

<div class="bg-img"></div>

这是考虑偏斜和伪元素的另一个想法：

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.bg-img {
  height: 100%;
  background: 
    url("http://unsplash.it/1200x800") center/cover no-repeat;
  position:relative;
  overflow:hidden;
}
.bg-img:before,
.bg-img:after{
  content:"";
  z-index:0;
  position:absolute;
  background:rgba(41, 196, 169, 0.61);
  width:calc(50% + 100px);
  height:50%;
  right:0;
  mix-blend-mode: multiply;
}
.bg-img:before {
  top:0;
  transform:skewX(-35deg);
  transform-origin:bottom right;
}
.bg-img:after {
  bottom:0;
  transform:skewX(35deg);
  transform-origin:top right;
}

<div class="bg-img"></div>