이 유형의 뷰를 이온으로 만드는 방법은 무엇입니까?

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>

아래 시도하고 나는

가 어떻게 이온의 이미지 뷰의 유형 아래에 달성 할 수있는보기 이러한 유형의는 무엇입니까?

마지막으로 나는 해결책을 와서 내가

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>