CSS div椭圆形

Question

有人可以帮助我从div中删除吗？

该死的，每个人都在贬低，尽管甚至没有一个有效的答案。

修改

找到了可能的解决方案，但对SVG没有任何了解。也许有人可以帮助我。

HTML：

 <svg viewBox="0 0 400 150">
 <path opacity="0.6" fill="red" d="M0,10 Q0,0 10,0 Q195,40 390,0 Q400,0 400,10 Q390,75 400,140 Q400,150 390,150 Q195,100 10,150 Q0,150 0,140 Q10,75       0,10" />
 </svg>

CSS：

svg {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 1

body {overflow-x：hidden}  svg {left：47％; position：relative; top：-24％; transform：translate（-50％， - 50％）; width：2000px;}

Answer 2

试一试： -

#oval_parent{
    background:black;
    width:200px;
    height:120px;
    overflow:hidden;
}

#oval{
  
    width: 220px;
    height: 100px;
    margin:10px 0 0 -10px;  
    background: white;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

<div id="oval_parent">
    <div id="oval"></div>
</div>

Answer 3

不知道为什么人们会投票给你。这是一个有效的问题。

HTML：

<div class="oval"></div>

的CSS：

.oval { width: 100px; height: 50px; border-radius: 50%; background: red; overflow: hidden;}

诀窍是让一方比另一方大。如果您使用图像，则隐藏溢出以剪切背景内容。

根据椭圆的方向改变宽度和高度。

这是一个JSfiddle：

https://jsfiddle.net/10cq0vmv/

Answer 4

最简单的方法是在导航后立即创建一个div，并使用Photoshop制作弯曲的png并将其作为背景应用于该div。因此，通过这种方式，您可以在导航后使用矩形导航和带弯曲背景的div。

.nav-bot{
    background: url(https://s23.postimg.org/jakqjag8r/nav_bot.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 20px;
} 

以下是示例fiddle。

的修改
如果您不想使用图片，则还有另一种方法可以使用css gradient和box-shadow。

.nav-bot{
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%);
    width: 104%;
    margin-left: -2%;
    height: 50px;
    border-radius: 50%;
    margin-top: -19px;
    -webkit-box-shadow: 0px 6px 15px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 6px 15px 0px rgba(0,0,0,0.75);
    box-shadow: inset 1px 3px 5px 0px rgba(0,0,0,0.75);
}

这是example。

希望这会对你有所帮助。