Clever Geek Handbook

How can you implement a border radius like an egg

Is it possible to implement this image style with css3?

enter image description here

I have set this border style to

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

but I think this is not correct.

+3


source to share


3 answers


You can create something similar with pseudo-elements. First you can use to create this shape border-radius

, and then you can add large ones box-shadow

for the gray area and another one for this 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>
Run codeHide result


+1


source


I'll give you a little code for the egg. It is created by the 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>
Run codeHide result


+2


source 


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


source






More articles:


All Articles