CSSの負のボーダー半径は？

Question

私はこのようになりますdiv要素を作るためにCSSをやろうとしている：私はかなりこの使用を開始しています

：最も簡単な方法は、あまりにもせずに、これを行うにいただきました

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

多くのコード？

Answer 1

あなたは

.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>

Answer 2

.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>

Answer 3

を "切り取る" を提供するようにbefore擬似要素を使用することができますここでは、この時間は、ラジアル背景画像を使用して、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; 
}