在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中的负边界半径？

回答

相关问题