html - 如何给边框半径使元素看起来像这个图像？

Question

我正在尝试使 .main-div 像这张图片一样

.main-div {
  width: 100px;
  height: 100px;
  background-color: Red;
  border-radius: 30px/20px;
}

<div class="main-div"></div>

我的 JSFiddle 是 here .

Answer 1

你可以使用一个伪元素来实现这个形状

body {
  background: lightgray;
}

.main-div {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 100px;
  background-color: red;
  border-radius: 30%/50%;
  background: url(/image/CWoXa.png) center center no-repeat;
  background-size: 110px 110px;
}

.main-div::after {
  content: '';
  position: absolute;
  left: 5px;
  top: -5px;
  width: 100px;
  height: 110px;
  background: inherit;
  background-size: inherit;
  border-radius: 50%/30%;
}

.main-div+.main-div {
  background: gray;
}

<div class="main-div"></div>
<div class="main-div"></div>