如何制作垂直椭圆形的形状div？答案

【问题标题】：How to make a vertical oval type of shape div?如何制作垂直椭圆形的形状div？
【发布时间】：2020-07-04 20:21:22
【问题描述】：

我想创建一个像下面这样的椭圆形，但失败了

还有什么方法可以在这个椭圆形的 css 中插入图像？这是我的主要目标。

#oval {
  margin: 0px 0 10 02px;
  background: black;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 70px;
  border-radius: 50px / 50px;
  border-top-left-radius: 150px;
  border-top-right-radius: 150px;
  border-bottom-left-radius: 150px;
  border-bottom-right-radius: 150px;
  width: 80px;
  height: 100px;
}

<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

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

</html>

【问题讨论】：

标签： html css css-shapes

【解决方案1】：

您可以将SVG视为蒙版，您可以轻松获得此形状。

.box {
  width:300px;
  display:inline-block;
  background:url(https://picsum.photos/id/1074/800/800) center/cover;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 64 78' ><path d='M0 39 C0 61 8 78 32 78 C56 78 64 61 64 39 C64 19 56 0 32 0 C8 0 0 19 0 39 Z' /></svg>") 0 / 100% 100%;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 64 78' ><path d='M0 39 C0 61 8 78 32 78 C56 78 64 61 64 39 C64 19 56 0 32 0 C8 0 0 19 0 39 Z' /></svg>") 0 / 100% 100%;
}
.box::before {
  content:"";
  display:block;
  padding-top:121%;
}

<div class="box"></div>

<div class="box" style="width:150px;"></div>

在我正在使用的 SVG 下方，如果您想编辑它，这里有一个很好的在线工具，您只需将路径附加到 url 即可开始编辑：https://jxnblk.github.io/paths/?d=M0 39 C0 61 8 78 32 78 C56 78 64 61 64 39 C64 19 56 0 32 0 C8 0 0 19 0 39 Z

<svg
  xmlns='http://www.w3.org/2000/svg'
  viewBox='0 0 64 78'
  width='100' >
  <path d='M0 39 
           C0 61 8 78 32 78 
           C56 78 64 61 64 39 
           C64 19 56 0 32 0 
           C8 0 0 19 0 39 Z' />
</svg>

【讨论】：

真的很棒。我尝试使用 svg 并没有成功，因为我没有添加 ::before。我不知道这一点，我不明白为什么我们必须添加它。还有，121%是怎么计算的？
@dgknca 前面不需要，您只需设置高度即可：jsfiddle.net/7xavjL9h。我将它与填充技巧一起使用以获得通用解决方案并保持相同的比率。 121% 来自问题中发布的图片 (1020/840)

【解决方案2】：

感谢@dgknca，使用我尝试过的clipreact并添加border-radius完成了这项工作，更新：问题，宽度和顶部高度看起来不错，但顶部曲线在我的要求图像中被弄平了，这个从顶部太椭圆了有什么帮助吗？

#oval {
  margin: 0px 0 10 02px;
  background: url("https://picsum.photos/536/354");
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 70px;
  border-radius: 50px;
  clip-path: ellipse(50% 50% at 50% 50%);
  width: 82.4px;
  height: 100px;
}

&lt;div id="oval"&gt;&lt;/div&gt;

【讨论】：

边界半径什么都不做，只有剪辑路径在这里完成工作，但仍然不完全像问题的图片
并且您使用的剪辑路径将产生与边框半径相同的结果：jsfiddle.net/e3vLjnty
@TemaniAfif 我刚刚注意到你是对的，宽度和顶部高度看起来不错，但顶部曲线在我的要求图像中变得平坦，而这个从顶部太椭圆了
@TemaniAfif 你可以给它做一个边界半径吗？我尝试使用 css 它不工作