卵のようなボーダー半径を実現する方法

Question

このスタイルのイメージをcss3で実現できますか？

私は

.image img {border-radius: 40% 60% 60% 40%/50%; } 

では境界線のこのスタイルを設定しているが、私はそれが正しいものではないと思います。

Answer 1

ボーダー半径によって作成されます。最初にborder-radiusを使用できる形を作成してから、灰色の領域に大きいbox-shadowを追加し、青い影に1つ多く追加できます。

.egg { 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 400px; 
 
    width: 400px; 
 
} 
 

 
.egg:after { 
 
    content: ''; 
 
    width: 250px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 200px; 
 
    margin: 50px; 
 
    transform: rotate(-135deg); 
 
    box-shadow: -7px -7px 0px 0px #67BEF9, 0px 0px 0px 400px #ECECEC; 
 
    border-radius: 204px 109px 106px 212px/125px 110px 110px 125px; 
 
}

<div class="egg"> 
 
    <img src="https://st.hzcdn.com/simgs/25e1d6580f5a3538_4-1972/traditional-staircase.jpg" alt=""> 
 
</div>

Answer 2

私はあなたに卵のための少しコードを与えます。それは、あなたが疑似elemntsと同様のものを作成することができ

#egg { 
 
     display:block; 
 
     width: 126px; 
 
     height: 180px; 
 
     background-color: red; 
 
     -webkit-border-radius: 63px 63px 63px 63px/108px 108px 72px 72px; 
 
     border-radius:   50% 50% 50% 50%/60% 60% 40% 40%; 
 
    }

<div id="egg"></div>

Answer 3

<div style="height=;height: 505px;width: 655px;background-color: #ececec;"> 
    <img src="test_img.png" height="500" width="650" style="border-top-left-radius: 100% 100%;border-top-right-radius: 100% 160%;border-bottom-left-radius: 135% 100%;border-bottom-right-radius: 50% 50%;"> 
</div>