CSS技巧：如何使外部div呈现边框圆角效果

Question

我正尝试用css/html创建以下设计布局，但我无法获得以蓝色圆圈（BOTTOM-LEFT）包围的倒置border-radius样式。

到目前为止，我在我的div中使用了以下css属性：

  border-radius: 0 0 0 3rem;

结果如下所示：

结果如下：

我尝试了给下一个 div 添加 margin-top: -3rem，虽然可以实现效果，但会破坏全屏界面的高度结构，需要改变所有权重百分比，这并不优雅。此外，我在 stackoverflow 上找到了这些技巧，但我不知道如何根据他们的代码获得结果，而且这并不简单。

请您提供一些简单的方法和技巧来实现这个效果。

- Programmer Man

---

你想要半径只在左下角吗？ - Manikandan2811

左下角的圆角是 border-radius: 0 0 0 3rem，而且它起作用了。问题是我想问的是上左倒置的边框。 - Programmer Man

抱歉，我无法理解您想要的确切内容。能否请您清楚地解释一下？ - Manikandan2811

我认为那里所做的是一个左下角半径，而顶部的div重叠在它下面的一个div上面。这意味着你必须聪明地使用position、z-index和负的top-margin或padding来解决问题。 - Dumisani

截图似乎与您要求的不同。从这里我可以说，他们只是在具有背景图像的元素上应用了简单的边框半径，并使用z-index使黄色背景的元素位于其后面。这样的解决方案对您也可以吗？ https://jsfiddle.net/yerf0h3p/ 或者您需要顶部的部分是透明的吗？ - Kaiido

谢谢Kaiido，是的，这个解决方案很简单，但我认为有一种方法可以玩转border-radius，所以我在这里问了一下。 - Programmer Man

Answer 1

抱歉，这里有内联样式，但你只需要使用 position、z-index 和负的 margin-bottom 即可解决问题。

<div style="border-bottom-left-radius: 50px; margin-bottom: -50px; position:relative; z-index: 1; height:150px; background-color: blue;"></div>
<div style="border-bottom-left-radius: 50px; position:relative; z-index: 0; height:150px; background-color: red;"></div>

- Dumisani

Answer 2

如果你想要像示例一样设计，只需给你的 div 元素添加 padding 即可解决问题。

- Mfdsix Indo

---

也许你的意思是边距而不是内边距... - Programmer Man