半透明圆圈在另一半圆圈

Question

我必须在图片上做出这样的结构。有一个带有一些花哨结局的泡泡，我不知道，如何在它里面制作这个半透明的圆圈。 我怎样才能做到这一点？ 我有一些图像作为背景。

.bubble {
  background-color: #34bc74;
  border-top-right-radius: 0;
  border-radius: 10px;
  line-height: 18px;
  margin: 100px 0 0 0;
  padding: 15px 65px 25px 15px;
  position: relative;
  width: 200px;
}

.circle {
  background-color: #34bc74;
  border-bottom-right-radius: 140px;
  border-top-right-radius: 140px;
  border-left-color: transparent;
  width: 70px;
  height: 140px;
  position: absolute;
  z-index: 1;
  top: -70px;
  right: -70px;
  overflow: hidden;
}
.circle:after {
    height: 70px;
    width: 35px;
    left: -35px;
    z-index: 2;
    content: '';
    border-radius: 70px;
    position: absolute;
    // border: 35px solid $green;
    // box-shadow: 0px 300px 0px 300px #448CCB;
  }

<div class="bubble">
  Donec viverra sodales imperdiet. Aliquam eget ante nec nulla hendrerit dignissim sit amet id Donec viverra sodales imperdiet. Aliquam eget ante nec nulla hendrerit dignissim sit amet id
  <div class="circle"></div>
</div>

Answer 1

您可以尝试使用svg屏蔽创建形状。

Here's some more info from MDN

（差）例子......

＆＃13;

＆＃13;

body {
  background: url(https://unsplash.it/1000x1000);
}

.bubble {
  background-color: #34bc74;
  border-top-right-radius: 0;
  border-radius: 10px;
  line-height: 18px;
  margin: 100px 0 0 0;
  padding: 15px 65px 25px 15px;
  position: relative;
  width: 200px;
}

.bubble svg {
  position: absolute;
  right: -4em;
  top: -1em;
}

＆＃13;

<div class="bubble">
  Donec viverra sodales imperdiet. Aliquam eget ante nec nulla hendrerit dignissim sit amet id Donec viverra sodales imperdiet. Aliquam eget ante nec nulla hendrerit dignissim sit amet id
  <svg width="100" height="100">
  <defs>
    <mask id="inner-circle">
      <rect width="100%" height="100%" fill="white"/>
      <circle r="28" cx="40" cy="20" fill="black"/>
    </mask>
  </defs>
  <circle id="curve" r="50" cx="50" cy="50" fill="#34bc74" mask="url(#inner-circle)" />
</svg>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用pseudo-elements和box-shadow属性的组合，您可以接近预期的结果 根据需要尝试并调整height，width和box-shadow值。

.bubble {
  background-color: #34bc74;
  border-top-right-radius: 0;
  border-radius: 10px;
  line-height: 18px;
  margin: 100px 0 0 0;
  padding: 15px 65px 25px 15px;
  position: relative;
  width: 200px;
}

.circle {
  width: 155px;
  height: 140px;
  border-radius: 100%;
  position: absolute;
  top: -70px;
  right: -45px;
  overflow: hidden;
  z-index: -1;
}

.circle:after {
  content: "";
  width: 112px;
  height: 87px;
  border-radius: 100%;
  box-shadow: 55px -15px 0 0 #34bc74;
  position: absolute;
  z-index: 9;
  overflow: hidden;
}

.circle:before {
  content: "";
  width: 112px;
  height: 88px;
  border-radius: 100%;
  box-shadow: 72px 52px 0 0 #34bc74;
  position: absolute;
  z-index: 9;
  overflow: hidden;
}

<div class="bubble">
  Donec viverra sodales imperdiet. Aliquam eget ante nec nulla hendrerit dignissim sit amet id Donec viverra sodales imperdiet. Aliquam eget ante nec nulla hendrerit dignissim sit amet id
  <div class="circle"></div>
</div>