英雄形象的底部曲线

Question

我试图在我的英雄形象的底部得到一条曲线，但很难按照我想要的方式得到它。如果有人有任何建议，将非常感谢。

我想要的是什么

body {
  margin: 0;
  background: lightblue;
}

div#hero {
  display: flex;
  flex: 1;
  position: relative;
  height: 50vh;
  background-image: url('https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg');
  width: 100%;
  border-bottom-left-radius: 130% 600px;
  border-bottom-right-radius: 130% 600px;
  margin-left: -2em;
  padding-right: 4em;
}

.button {
  height: 60px;
  width: 180px;
  padding: 10px;
  border-radius: 5px;
  background-color: blue;
  margin: -25px auto;
  align-self: flex-end;
}

<div id="hero"></div>

Answer 1

似乎缩小垂直比例并扩大水平线会让你更接近：

border-bottom-left-radius: 150% 200px;
border-bottom-right-radius: 150% 200px;

另一种方法是使用clip-path来自定义要形成的形状。将您的CSS修改为：

#hero {
  display: flex;
  flex: 1;
  position: relative;
  height: 50vh;
  background-image: url('https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg');
  width: 100%;
  clip-path: polygon(0% 0%, 0% 85%, 50% 100%, 100% 85%, 100% 0%);
  margin-left: -2em;
  padding-right: 4em;
}

唯一的缺点是IE / Edge不受支持，但其他大多数都是（Chrome / Firefox / Opera / Mobile）

我认为这是一个很好的资源，并提供了一些很好的例子。

http://karenmenezes.com/shapes-polygon/