純粋なCSSの対話

Question

次のコードで "赤"の背景をどのように透明にすることができますか？私は身体に背景画像を使用したいと

https://codepen.io/anon/pen/JrEwyy

.from-me { 
    position:relative; 
    padding:10px 20px; 
    color:white; 
    background:#0B93F6; 
    border-radius:25px 25px 0 25px; 
    float: right; 

    &:before { 
     content:""; 
     position:absolute; 
     z-index:-1; 
     bottom:-2px; 
     right:-7px; 
     height:20px; 
     border-right:20px solid #0B93F6; 
     border-bottom-left-radius: 16px 14px; 
     -webkit-transform:translate(0, -2px); 
    } 

    &:after { 
     content:""; 
     position:absolute; 
     z-index:1; 
     bottom:-2px; 
     right:-56px; 
     width:26px; 
     height:20px; 
     background:red; 
     border-bottom-left-radius: 10px; 
     -webkit-transform:translate(-30px, -2px); 
    } 
} 

、私は赤の背景を非表示にする必要があり

Answer 1

これはあなたの問題に異なるアプローチです。あなたの青い色のボックスから一部を削除する代わりに、別の方法でカスタムシェイプを作成しました。このようなことを達成しようとしていることを願っています。

.square{ 
 
    width:100px; 
 
    height:100px; 
 
    overflow:hidden; 
 
    position:relative; 
 
    float: left 
 
} 
 
.round{ 
 
    width:200px; 
 
    height:200px; 
 
    border: solid 100px red; 
 
    position: absolute; 
 
    bottom: -100px; 
 
    left: -100px; 
 
    border-radius: 50%; 
 
}

<div class="square"> 
 
    <div class="round"></div> 
 
</div>

Answer 2

、カールを作成して1を使用するために、2つの擬似要素を使用しないでください放射グラジエント。

body { 
 
    font-family: "Helvetica Neue"; 
 
    font-size: 20px; 
 
    font-weight: normal; 
 
    background-image: url("https://storage.googleapis.com/gweb-uniblog-publish-prod/images/Background.2e16d0ba.fill-1422x800.jpg"); 
 
} 
 

 
section { 
 
    max-width: 450px; 
 
    margin: 50px auto; 
 
} 
 

 
section div { 
 
    max-width: 255px; 
 
    word-wrap: break-word; 
 
    margin-bottom: 20px; 
 
    line-height: 24px; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
} 
 

 
.from-me { 
 
    position: relative; 
 
    padding: 10px 20px; 
 
    color: white; 
 
    background: #0B93F6; 
 
    border-radius: 25px 25px 0 25px; 
 
    float: right; 
 
} 
 

 
.from-me:before { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    width: 14px; 
 
    height: 14px; 
 
    background: radial-gradient(circle at top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 14px, #0b93f6 14px); 
 
    bottom: 0; 
 
    left: 100%; 
 
}

<section> 
 
    <div class="from-me"> 
 
    <p>Hey there! What's up?</p> 
 
    </div> 
 
</section>