英雄形象的底部曲线[重复]答案

【问题标题】：Bottom curve on hero image [duplicate]英雄形象的底部曲线[重复]
【发布时间】：2018-03-22 07:23:12
【问题描述】：

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

我想要得到什么

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

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

【问题讨论】：

你能发布一个你想要实现的设计的链接吗？取决于此，答案会有所不同。
是的，对不起，我忘了添加它。来了

标签： html css

【解决方案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/

【讨论】：