div椭圆形，带有css角

Question

我正在尝试获得类似于图像的形状。

我正在尝试使用边界半径css，但我得到的只是一个半圆。 有人可以帮助我吗？

Answer 1

使用伪元素创建此元素。诀窍是要有一个小的重叠部分，而您不要为重叠部分上色：

.box {
  width:150px;
  height:200px;
  position:relative;
}
.box:before,
.box:after {
  content:"";
  position:absolute;
  bottom:0;
  width:70%;
  box-sizing:border-box;
  top:0;
  bottom:0;
  background-color:red;
  background-clip:content-box; /* Don't color the padding */
}
.box:before {
  left:0;
  padding-right:20%; /* (70% - 50%)*/
  border-radius: 150px 0 0 0;
}
.box:after {
  right:0;
  padding-left:20%;
  border-radius: 0 150px 0 0;
}

<div class="box">

</div>

然后，您可以使另一侧溢出，您将拥有想要的形状：

.box {
  width:150px;
  height:200px;
  position:relative;
  overflow:hidden;
}
.box:before,
.box:after {
  content:"";
  position:absolute;
  bottom:0;
  width:80%;
  box-sizing:border-box;
  top:0;
  bottom:0;
  background-color:red;
  background-clip:content-box;
}
.box:before {
  left:-10%;
  padding-right:20%;
  border-radius: 150px 0 0 0;
}
.box:after {
  right:-10%;
  padding-left:20%;
  border-radius: 0 150px 0 0;
}

<div class="box">

</div>

---

这是使用多个背景的另一个想法：

.box {
  width:130px;
  height:200px;
  background:
    radial-gradient(circle 90px at -20px             100%, red 98%,transparent 100%) top right/50% 90px,
    radial-gradient(circle 90px at calc(100% + 20px) 100%, red 98%,transparent 100%) top left /50% 90px,
    linear-gradient(red,red) bottom/100% calc(100% - 80px);
  background-repeat:no-repeat; 
}

<div class="box">

</div>