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

Question

我可以用css3实现这种风格的图像吗？

我在

中设置了这种边框样式

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

，但我认为这不对。

Answer 1

我会给你一些鸡蛋代码。它由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>

Answer 2

您可以使用伪元素创建类似的东西。首先要创建该形状，您可以使用border-radius，然后可以为灰色区域添加大box-shadow，为蓝色阴影添加一个。{/ p>

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>