CODEWITHSUNDEEP
htmlcss
Rexhep Rexhepi
Rexhep Rexhepi

Reputation: 137

How can realize border radius like egg

Can I realize this style of image with css3?

enter image description here

I have set this style of border in 

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

, but I think that isn't right one.

Upvotes: 2

Views: 338

Answers (3)

Kinjal Akhani
Kinjal Akhani

Reputation: 168

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

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122027

You could create something similar with pseudo-elemnts. First to create that shape you can use border-radius and then you can add large box-shadow for gray area and one more for that blue shadow.

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

Upvotes: 1

Giorgi Parunov
Giorgi Parunov

Reputation: 71

I will give you a little code for egg . It is created by border-radius

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

Upvotes: 2

Related Questions