标签 css
<分区>
我正在尝试在 css/html 中进行以下设计布局，但我无法获得用蓝色 (BOTTOM-LEFT) 包围的倒置 border-radius 样式。
到目前为止，我在我的 div 中使用了以下 css 属性:
border-radius: 0 0 0 3rem;
结果如下:
我试图为下一个 div 创建一个 margin-top:-3rem ，它可以工作，但会破坏全屏 ui 的 div 高度结构，并让我更改所有不优雅的重量百分比.另外，我发现 these tricks来自 stackoverflow，但我不知道如何根据他们的代码获得结果，而且它一点也不简单。
寻找建议和简单的技巧来实现这一目标。
最佳答案
请原谅内联样式，但您只需要使用 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>关于从外部 div 制作边框半径的 CSS 技巧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58335709/