如何在css中绘制内半径？

2016-09-09 Shahid

请告诉我们你有什么到目前为止已经试过。 –

我试图用边界半径，但是绘制其他方式。 – Shahid

即使它不起作用，请向我们显示您的代码，我们会尽力帮助您解决您的问题。 –

方法＃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>

来源

2016-09-09 06:55:27

的最简单的方法将使用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>

来源

2016-09-09 06:22:17

但如果我不想在圆角的白色背景然后如何？ – Shahid

这是做得很好，但是当我在这个div内设置图像时，它不会从这个边缘切割。 – Shahid

试试这个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; 

}

来源

2016-09-09 06:24:14 Kushan

如何在css中绘制内半径？

回答

相关问题