如何将 div 放入弯曲的 div 中？答案

【问题标题】：how to fit a div inside curved div?如何将 div 放入弯曲的 div 中？
【发布时间】：2017-03-22 17:40:08
【问题描述】：

我在一个 div 中有一个 div，

<div style="background-color: red; height: 100px; width: 100px; border-radius: 10px;" id="div1"> 
        <div style="background-color: orange;" id="div2">
            testing
        </div>
</div>

位于 div1 顶部的 div2 与 div1 的曲线不对齐。

即使我改变了div2的边框半径，也无法与div1的半径曲线完美对齐。如何去除div1曲线外多余的div2？

jsfiddle here

【问题讨论】：

请为此创建一个 jsfiddle。
jsfiddle.net/sjj3k6br

标签： javascript html css

【解决方案1】：

我们开始：添加溢出：隐藏

<div style="background-color: red; height: 100px; width: 100px; border-radius: 10px; overflow:hidden" id="div1"> 
        <div style="background-color: orange;padding-left:5px" id="div2">
            testing
        </div>
</div>

【讨论】：

【解决方案2】：

你必须告诉父级隐藏其子级的溢出：

overflow: hidden; 在 div1 上

【讨论】：