在CSS中的負邊界半徑？

我試圖做的CSS，使一個div，看起來像這樣：在CSS中的負邊界半徑？

我幾乎開始使用此：

.player { 
    width: 480px; 
    height: 80px; 
    border-radius: 40px; 
}

請告訴我最簡單的方式做到這一點，沒有太多很多代碼？

來源

2017-07-27 Jason Axelrod

可以使用before僞元素來提供使用徑向背景圖像「切出」

.player { 
 
    width: 480px; 
 
    height: 80px; 
 
    border-radius:0 40px 40px 0; 
 
    background-color:#0000FF; 
 
    position:relative;  
 
    color:#FFF; 
 
} 
 

 
.player:before 
 
{ 
 
    width: 80px; 
 
    height: 80px; 
 
    border-radius:0 40px 40px 0; 
 
    background-color:#FFF;  
 
    display:inline-block; 
 
    vertical-align: middle; 
 
    margin-right: 10px; 
 
    content: ''; 
 
}

<div class="player">Some Content</div>

來源

2017-07-27 01:56:25

不錯！我真的有點驚訝，看到這是可能的。 –

問題是，我需要縮進是透明的，不是白色的; –

我們不是那裏，但即將推出'clip-path'：http://caniuse.com/#feat=css-clip-path＆https://css-tricks.com/almanac/properties/c/clip/ –

.wrapper { 
 
    width: 500px; 
 
    height: 103px; 
 
    background-color: red; 
 
    padding-top: 15px; 
 
} 
 

 
.player { 
 
    width: 480px; 
 
    height: 83px; 
 
    margin-left: 10px; 
 
    border-top-right-radius: 40px; 
 
    border-bottom-right-radius: 40px; 
 
    border: 1px solid black; 
 
    border-left: none; 
 
    background-color: blue; 
 
    -webkit-mask-image: radial-gradient(circle at left, transparent 0, transparent 40px, black 41px); 
 
}

<div class="wrapper"><div class="player"></div></div>

來源

2017-07-27 02:01:50 bubjavier

問題是，我需要縮進是透明的，而不是白色的; –

@JasonAxelrod，這應該現在工作..請檢查。 – bubjavier

錯誤..不在Firefox中工作..只在鉻。 – bubjavier

這裏的yet another way of doing it，此時。這使它變得透明並且可以在Firefox和Chrome中使用。

.player { 
    width: 480px; 
    height: 80px; 
    border-radius:40px; 
    background-image: radial-gradient(circle at 38px 40px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 40px, blue 40px); 
    color:#FFF; 
}

來源

2017-07-27 03:42:32 Auroratide

似乎至少可以在IE 11中工作，可能需要稍微調整位置 –

在CSS中的負邊界半徑？

回答

相關問題