もう半分の円の半透明の円

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マスキングを使用して形状を作成してみてください。あなたが意図した結果に近づくことができpseudo-elementsとbox-shadow特性の組合せを使用して

Here's some more info from MDN

（貧しい）例...

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

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

Answer 2

。
実験を行い、必要に応じて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>