CSS div椭圆形

有人可以帮我做出这样一个从div切出？

该死的，每个人都在下调，尽管没有一个有效的答案。

编辑

找到可行的解决方案，但不具有SVG.Maybe知识的人可以帮助我。

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%); 
}

来源

2016-12-09 Arkadis Stepanov

[Curved background image in CSS]（http：// stackoverflow。com/questions/40952360/curved-background-image-in-css） – junkfoodjunkie

我不这么认为。那是一条让曲线向上的曲线。这一个是关于做一个椭圆形。 – John

体{溢出 - X：隐藏} SVG {左：47％;位置：相对;顶部：-24％;变换：翻译（-50％，-50％）; width：2000px;}

来源

2016-12-09 07:57:12

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

HTML：

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

CSS：

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

诀窍是具有一侧比另一更大。如果您使用图像，则隐藏溢出以剪切背景。

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

这里有一个的jsfiddle：

https://jsfiddle.net/10cq0vmv/

来源

2016-12-09 04:22:19 John

不能使它工作 –

您最初发布的问题不够具体，这就是答案，现在你已经发布了你想要完成的结果 - 是的，你需要一些不同的东西 – John

这样做的最简单的方法是创建导航后一个div权，使弯曲PNG用Photoshop，并将其应用为背景，以该分区。因此，在导航之后，您可以使用矩形导航和具有弯曲背景的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。

希望这可以帮助你。

来源

2016-12-09 05:20:50 Sasith

有没有想过，但他们没有接受它作为有效的解决方案 –

尝试： -

#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>

来源

2016-12-09 05:27:07

CSS div椭圆形

回答

相关问题