如何在css中繪製內半徑？

Question

請幫我我要讓一個div像這樣

Answer 1

方法＃01：

使用raidal-gradient：

body { 
 
    background: #f0f0f0; 
 
    margin: 0; 
 
} 
 
.box { 
 
    background: radial-gradient(circle at bottom right, transparent 60px, #000 60px); 
 
    height: 150px; 
 
    width: 250px; 
 
}

<div class="box"></div>

方法＃02：

您可以:before或:after僞元素和box-shadow CSS屬性的組合來創建它。

body { 
 
    background: #f0f0f0; 
 
    margin: 0; 
 
} 
 
.box { 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 150px; 
 
    width: 250px; 
 
} 
 

 
.box:before { 
 
    box-shadow: 0 0 0 1000px #000; 
 
    border-radius: 100%; 
 
    position: absolute; 
 
    bottom: -30px; 
 
    height: 100px; 
 
    right: -35px; 
 
    width: 100px; 
 
    z-index: -1; 
 
    content: ''; 
 
}

<div class="box"></div>

Answer 2

的最簡單的方法將使用pseudo element。通過絕對定位:after元素，您可以獲得理想的效果。

.box { 
 
    background: #000; 
 
    width: 300px; 
 
    height: 150px; 
 
    position: relative; 
 
} 
 
.box:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 50%; 
 
    background: #fff; 
 
    right: -75px; 
 
    bottom: -75px; 
 
}

<div class="box"></div>

Answer 3

試試這個CSS，

.rec{ 
    height: 200px; 
    background: black; 
    position: relative; 
    width:600px; 
} 

.rec:after { 
    content: ''; 
    position: absolute; 
    bottom: -20px; right: -20px; 
    border-bottom: 100px solid white; 
    border-left: 100px solid white; 
    width: 0; 
    background:#fff; 
    border-radius:150px; 

}