如何给一个div椭圆形状？答案

【问题标题】：How to give a div oval shape?如何给一个div椭圆形状？
【发布时间】：2016-12-21 20:13:31
【问题描述】：

我尝试了很多椭圆形，两边都有切口，但不能做到，请

我需要两边都有切口的椭圆形代码..

下面是我的代码：-

.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;
    }

【问题讨论】：

您可以使用百分比值作为边框半径而不是像素，请参阅Border-radius in percentage (%) and pixels (px)

标签： css css-shapes

【解决方案1】：

这样好吗？

HTML

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

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.

【讨论】：

我没有时间写一个例子，但这就是我在 1+ 得到的结果
@Sheikh Heera 我需要 100% 宽度的背景和椭圆形请帮助
抱歉，我不在家，正在手机上回复，但我会尽快回到家中尝试。
@Anudeep、is this ok 或 this one。
@Anudeep，here is another，但如果没有一些固定的维度，here is another 就无法完全做到这一点，只需使用radius。

【解决方案2】：

试试这个：

#oval-shape {
    width: 200px;
    height: 100px;
    background: blue;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

注意角值与高度的比率。

演示 - http://jsfiddle.net/XDLVx/

【讨论】：

【解决方案3】：

更改 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;
}

【讨论】：

或边界半径：50% / 50% :)

【解决方案4】：

把它放在另一个足够高以显示所有椭圆的div中，不够宽，并设置溢出：隐藏。如果它位于中心，则边缘将被切断，但您将无法横向滚动。

【讨论】：

【解决方案5】：

这里有两种可能的变体：

方法#01：

使用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>

方法#02：

使用:before 或:after 伪元素创建叠加层。
添加border-radius。
在父级上应用带有overflow: hidden 的大box-shadow 以隐藏不需要的区域。

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>

【讨论】：