wie ein div innerhalb gebogen div?

Question

Ich habe ein div in einem 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> 

Die DIV2 die an der Spitze des DIV1 sitzt, nicht mit der Kurve der DIV1 nicht auszurichten.

Auch wenn ich die Grenze Radius von div2 ändern, kann ich nicht perfekt mit div1 ‚s Radius Kurve auszurichten. Wie entfernt man die div2, die außerhalb der Kurve von div1 ist?

jsfiddle here

Answer 1

Hier gehen wir versteckt

<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>

Answer 2

Sie haben die Eltern zu sagen, den Überlauf seines Kindes zu verbergen: Überlauf hinzufügen:

overflow: hidden; auf div1