CSS中的图层蒙版

Question

我正在努力实现与此相似的效果

我知道如何做背景图片等等。但是蓝色圆圈被认为是一个带有图层蒙版的图像，因此您可以看到背景图像。左边的灰色div只会在它后面重叠。我不知道如何实现掩蔽效果，我已经对它进行了一些研究here，但是我很难说出要实现的效果是什么有用。任何人对我如何编写代码都有任何想法？

Answer 1

我想是这样的。

* { margin:0; padding: 0; }
body {
  background: url('http://www.bestmanspeechestoasts.com/wp-content/themes/thesis/rotator/sample-4.jpg');
}
p { padding: 0 10px; font-size: 12px; color:#fff; line-height: 1.3; overflow: hidden; }
.outer {
  margin: 50px auto;
  width: 300px;
  position: relative;
}
.box {
  position: relative;
  padding: 20px 0;
  overflow: hidden;
  border-radius: 10px;
}
.box:before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  float: left;
  border-radius: 50px;
  box-shadow: 0 0 0 350px rgba(0, 0, 0, 1);
}
.outer:before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: blue;
  border-radius: 20px;
  position: absolute;
  top: 25px;
  left: -20px;
}

<div class="outer">
  <div class="box"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>
</div>

Answer 2

这样的事情可能会让你开始：

<强> HTML

<div id="container"> 
  <div id="gray-box" class="clip-circle"></div>
  <div id="blue-circle">&nbsp;</div>
</div>

<强> CSS

.clip-circle {
  clip-path: circle(5px at 0px 15px);
}
#gray-box {
  border-radius: 15px;
  background-color: #AAA;
  width: 300px;
  height: 60px;
}
#blue-circle {
  position: absolute;
  left: 5px;
  top: 13px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: blue;
}

http://codepen.io/anon/pen/dobbwQ