CSS 如何给div椭圆形？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12972145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to give a div oval shape?
提问by Anudeep GI
I tried a lot on oval shape which have cut in both sides but not able to do it please 
我在椭圆形上尝试了很多，两边都有切口，但不能做到
I need code for oval shape with cut in both side..
我需要两边都有切口的椭圆形代码..
Here's my code below:-
这是我的代码如下：-
.demo{
width: 100%;
height: 600px;
background: white;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 178px;
border-radius: 694px / 208px;
z-index: 100;
position: relative;
}
回答by The Alpha
Is this OK ?
这个可以吗 ？
HTML
HTML
<div id="oval_parent">
<div id="oval"></div>
</div>
CSS
CSS
#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;
}
DEMO.
演示。
回答by boz
Try this:
尝试这个：
#oval-shape {
width: 200px;
height: 100px;
background: blue;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
Notice the ratios in the corner values in relation to the height.
请注意角值与高度的比率。
回答by Kedume
Change the values on css:
更改 css 上的值：
#demo {
width: 100%;
height: 600px;
background: white;
-moz-border-radius: 50% / 250px;
-webkit-border-radius: 40% / 250px;
border-radius: 50% / 250px;
z-index: 100;
position: relative;
}
回答by MickMalone1983
Put it inside another div which is high enough to show all the oval, not quite wide enough, and set overflow: hidden. If it's positioned at the centre the edges will be cut off, but you won't be able to side-scroll.
将它放在另一个足够高以显示所有椭圆形的 div 中，不够宽，并设置溢出：隐藏。如果它位于中心，边缘将被切断，但您将无法横向滚动。
回答by Mohammad Usman
Here are two possible variants:
以下是两种可能的变体：
Method #01:
方法#01：
Use radial-gradient():
background: radial-gradient(ellipse 65% 40%, transparent 0, transparent 90%, black 90%);
body {
background: linear-gradient(orange, red);
padding: 0 20px;
margin: 0;
}
.oval {
background: radial-gradient(ellipse 65% 40%, transparent 0, transparent 90%, black 90%);
height: 100vh;
}<div class="oval">
</div>Method #02:
方法#02：
- Create an overlay with
:beforeor:afterpseudo element. - Add
border-radius. - Apply a large
box-shadowwithoverflow: hiddenon parent to hide undesired area.
- 使用
:before或:after伪元素创建叠加层。 - 添加
border-radius. - 在父级上应用一个大的
box-shadowwithoverflow: hidden来隐藏不需要的区域。
body {
background: linear-gradient(orange, red);
padding: 0 20px;
margin: 0;
}
.oval {
position: relative;
overflow: hidden;
height: 100vh;
}
.oval:before {
box-shadow: 0 0 0 500px #000;
border-radius: 100%;
position: absolute;
content: '';
right: -10%;
left: -10%;
top: 10%;
bottom: 10%;
}<div class="oval">
</div>