CSS：矩形边到圆内 [英] CSS: Rectangle side to round inside

问题描述

如何创建圆角边（而不是圆角）？
我想过在它上面放一个白色的圆圈，但是我认为一定有一个更清洁的方式。

How can I create the rounded side (not corner) to round inside? I've thought about placing a white circle over it but then I figure there must be a cleaner way.

我试过这个，但它向外： / p>

I tried this but it round outwards:

.box {
    width: 30em; height: 10em;
    border-radius: 0 0 50% 50% / 0 0 .75em .75em; 
    background: black;
}

它应该看起来像这样：

推荐答案

坦白地说，我认为我们需要使用另一个div，因为它不可能用css来弯曲这样的div

Well frankly i think we need to use another div to make it because its not possible to curve a div like this with css

请参考下面的代码：

HTML

HTML

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

CSS

.box {
    width: 30em; height: 10em;
    border-radius: 0 0 50% 50% / 0 0 .75em .75em; 
    background: black;
    position:relative;
}
.box1 {
    background: white none repeat scroll 0 0;
    border-radius: 50% / 0.75em;
    bottom: -1px;
    height: 2em;
    position: absolute;
    width: 30em;
}

这里是 fiddle 示例上述代码的工作罚款：）

Here is a fiddle example for the above code its working fine :)

这篇关于CSS：矩形边到圆内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！