イオンでこのタイプのビューを作成する方法は？

Question

は、私は、コード

.halfOval { 
 
background-color: #a0C580; 
 
width: 400px; 
 
height: 100px; 
 
margin: 50px auto 0px; 
 
border-radius: 0 0 80% 80%/ 0px 0px 100% 100%; 
 
}

<div class="halfOval"></div>

の下にしようと、私は

がどのように私は、イオンの画像ビューの種類の下に達成することができますこのタイプのビューを取得していますか？

最後に私は解決策を思い付いたと私はあなたが、イオンにSVGを使用することができますに

Answer 1

<div style=" 
 
background-color: #19cb8d; 
 
width: 100%; 
 
height: 130px; 
 
margin: 0px auto 0px; 
 
border-radius: 200px/ 50px; 
 
border-top-right-radius: 0px; 
 
border-top-left-radius: 0px;"></div> 
 

 
    <!--rgba(236 , 239 , 241, 0)--> 
 
    <center> 
 
    <div style="width: 100px;height:100px;margin-top: -50px;border-radius: 100px;background-color: whitesmoke;box-shadow: 0 4px 8px 0 rgba(0 , 0 0, 0.2), 0 6px 20px 0 rgba(0 , 0 , 0, 0.19);border: 4px solid white;"> 
 
     <img src="http://www.freeiconspng.com/uploads/profile-icon-png-profiles-13.png" class="img-responsive" alt="Cinque Terre" width="42px" style="margin-top: 10px"> 
 
     <p style="color: grey;margin-top:-5px !important;font-size: 16px;font-family: "-apple-system", "Helvetica Neue", Roboto, "Segoe UI", sans-serif">Profile Pic</p> 
 
    </div> 
 
    </center>