divの1つの角だけをCSSで透明にするにはどうしたらよいですか？

Question

私は再利用可能なウィジェットを作成しようとしています。それは透明なテキストのオーバーレイと背景画像のいくつかの並べ替えを持っています。テキストオーバーレイの背景はほぼ正方形ですが、透明なコーナーが1つあります。 CSSを使ってこれを行う簡単な方法はありますか？

Answer 1

：

は、ここにリファレンスを参照してください。ここにあなたの再利用可能なウィジェットがあります。乾杯！

img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.img-widget { 
 
    width: 250px; 
 
    height: auto; 
 
    position: relative; 
 
} 
 
.img-widget .overlay { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 25%; 
 
    background: transparent; 
 
    text-align: center; 
 
    background-image: linear-gradient(118deg, transparent 0%, transparent 10%, #7AAD7A 10%, #7AAD7A 60%); 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.img-widget .overlay:after { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    content: ''; 
 
    height: 100%; 
 
}

<div class="img-widget"> 
 
    <img src="http://placehold.it/200x200" /> 
 
    <div class="overlay">Some text here</div> 
 
</div>

Answer 2

#green-overlay { 
    background: linear-gradient(135deg, transparent 30px, rgba(0,0,0,.5) 0) top left; 
    add the rest of your css for this element 
} 

このような何かが動作するはずです。 rgbaの値と30pxを置き換えて、コーナーをどのくらい深くしたいのですか。

https://jsfiddle.net/snavy/acbo36n2/

Answer 3

次（LIVE PEN HERE）のようなものを試してみてください：

HTML

<div class="row"> 
    This div has a background image 
    <div class="divider"><div id="rightDivider"><div></div></div></div> 
</div> 

CSS

html, body {margin: 0; padding: 0;} 
#rightDivider { 
    width: 80%; 
    height: 100px; 
    background: blue; 
    float: right; 
    position: absolute; 
    right: -50px; 
} 
#rightDivider div{ 
    bottom: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 0 0 100px 60px; 
    border-color: transparent transparent blue transparent; 
    float: right; 
    position: relative; 
    right: 100%; 
} 
.divider { 
    position: absolute; 
    bottom: 100px; 
    right: 0; 
    left: 0; 
} 
.row { 
    background: orange; 
    position: relative; 
    height: 300px; 
    padding: 0; 
    margin: 0;} 

Answer 4

あなたはCSS3の-webkit-クリップパスを使用して試みることができる

：ポリゴン（）;あなたの問題を解決するための属性。あなたはlinear-gradient背景を使用することができますCSS3 clip-path