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橢圓形

回答

相關問題