你如何擺脫div的一個角落在CSS中是透明的？

Question

我正在嘗試創建一個可重用的小部件。它將具有某種背景圖像，並具有透明文本覆蓋。文字疊加的背景大部分是方形的，但有一個透明的角落。有沒有簡單的方法來使用CSS做到這一點？

Answer 1

可以使用linear-gradient背景。這是您可重用的小部件。乾杯!

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-夾路徑：多邊形（）;屬性來解決你的問題。

請參見參考這裏：CSS3 clip-path