html - 如何创建两个色调的 SVG 蒙版和叠加层

Question

我目前正在尝试创建两个 SVG 覆盖/遮罩，如下图所示

我为覆盖创建了一个 Svg。就目前而言，我正在尝试创建两个元素，一个用于绿色侧，一个用于蓝色侧。

我几乎已经使用clip它似乎正在工作的 css 属性实现了效果，但是我注意到当我减小屏幕尺寸时，两个 SVG 蒙版相互重叠并且我失去了效果。

我也不是 100% 确定 css 属性transform: rotate;，因为我想在每个 div 中添加文本

对于我想要实现的，这是最好的方法，如果不是什么？

下面是我的代码片段，我还在下面添加了我的代码的链接。

    .hero-overlay {
       position: absolute;
        top: 0;
       height: 100%;
       width: 100%;
     -webkit-mask: url("https://dl.dropboxusercontent.com/u/58412455/circle-mask.svg") no-repeat center center;
      mask: url("https://dl.dropboxusercontent.com/u/58412455/circle-mask.svg") no-repeat center center;
      clip: rect(0px, 580px, 500px, 0px); }

    .mask-left {
      background-color: red; }

.mask-right {
   -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
      transform: rotate(180deg);
      background-color: blue; }

http://jsfiddle.net/newkidontheblock/72dL79bd/

Answer 1

您也可以使用 css 来实现这一点box-shadow

.container {
  background: url(https://unsplash.imgix.net/photo-1425036458755-dc303a604201?q=75&fm=jpg&w=1080&fit=max&s=d8d14b1bb37691447e6cf7d4f5a16112) no-repeat;
  position: Relative;
  width: 100%;
  height: 300px;
  background-size: cover
}
.left,
.right {
  position: absolute;
  width: 49.5%;
  left: 0;
  height: 100%;
  background: transparent;
  overflow: hidden;
}
.right {
  right: 0;
  left: auto;
}
.left:before,
.right:before {
  content: '';
  background: transparent;
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 50%;
  transform: translatey(-50%);
}
.left:before {
  left: calc(100% - 47px);
  box-shadow: 0px 0px 0px 391px rgba(0, 170, 177, 0.90)
}
.right:before {
  right: calc(100% - 47px);
  box-shadow: 0px 0px 0px 391px rgba(0, 179, 220, 0.90);
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>