如何才能实现像蛋一样的边界半径

我已经设置边框的这种风格在

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

，但我认为这是不正确的。

来源

2017-03-31 Rexhep Rexhepi

可以用剪辑属性从CSS3 –

您可以创建一个伪elemnts类似的东西产生。首先要创建该形状，您可以使用border-radius，然后可以为灰色区域添加较大的box-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>

来源

2017-03-31 12:55:03

谢谢！ :)但是当我尝试设置宽度400px（超过350）时，我无法保存此模型 –

您可以创建一个https://jsfiddle.net。 –

我无法创建jsfiddle。但你可以设置宽度：500px;和身高：450，尝试使用相同的形式？ –

我会给你一个鸡蛋的小代码。它是由边界半径

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

来源

2017-03-31 12:36:24

您可以使用任何图像与“背景图片”，并从该片段 –

是删除“背景色”，但我的图像是有点不同于鸡蛋，你可以看到我的形象:) :)谢谢:) –

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

来源

2017-03-31 13:00:52

试试这个，可能会有帮助 –

如何才能实现像蛋一样的边界半径

回答

相关问题