Css 我如何定位一个圆，它在一个矩形div的一半处，在该div的一半处？

我试着在一个矩形div上面画一个圆，其中一半圆在div之外

我首先尝试使矩形div的上部透明，以产生圆形div位于div中间的错觉

我的问题:

有更好的办法解决我的问题吗

有关所需结果，请参见附图

---

试试下面的css。圆的绝对位置为左50%，并给出与圆半径相同的负边距，因此圆的中心始终位于矩形的中间。然后给上边距赋予与半径相同的负边距，使圆出现在

div

之外

.circle{
背景：红色；
宽度：100px；/*圆直径*/
高度：100px；/*圆直径*/
边界半径：50%；
位置：绝对位置；
排名：0；
左：50%；
余量：-50px 0-50px；/*减去圆半径*/
}
.矩形{
背景：蓝色；
宽度：300px；
高度：100px；
边缘顶部：50px；/*圆半径*/
位置：相对位置；
}

---

另一个选项是使用

css二维变换

手动将圆移出框。这允许您为圆形div使用动态大小的内容。但是，除非您也变换内容，否则您将无法使用圆形正下方的空间。此外，如果您试图以旧浏览器（IE8及以下）为目标，这将不起作用

---

以下是我扩展Niyoko答案的尝试

.circle{
背景：红色；
宽度：100px；/*圆直径*/
高度：100px；/*圆直径*/
边界半径：50%；
位置：绝对位置；
排名：0；
左：50%；
余量：-50px 0-50px；/*减去圆半径*/
}
.矩形{
背景：蓝色；
宽度：300px；
高度：150像素；
边缘顶部：50px；/*圆半径*/
位置：相对位置；
}
.内包装{
文本对齐：居中；
颜色：#fff；
填充：60px 10px 10px 10px；
}

一些文本

一些文本