如何在离子中创建这种类型的视图？

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;