如何在css3中制作这种椭圆形状

Question

width: 100%;
    height: 200px;
    background: #5e2424;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 178px;
    border-radius: 694px 208px 0px 0px;
    z-index: 100;
    position: relative;
    top: -199px;
}

如何在图像中制作这个椭圆形？

Answer 1

使用伪元素

＆＃13;

＆＃13;

div {
  position: relative;
  width: 556px;
  height: 363px;
  background: url(https://i.stack.imgur.com/gHNBX.png);
  background: cover;
  overflow: hidden;
}
div::after {
  content: '';
  position: absolute;
  top: 165px;
  left: -45%;
  width: 180%;
  height: 200%;
  background: rgba(255,0,0,0.7);
  border-radius: 50%;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;