如何用CSS创建一个圆顶形状的矩形

Question

你能帮我用css中的clip-path制作一个具有这张图片中形状的div吗？

我想使用 Clip-path 而不是 mask，因为我必须将它应用到 div。 提前谢谢你

这里的形状：形状

Answer 1

您可以尝试将形状分成两部分，然后使用剪切路径的椭圆或圆形属性作为弯曲的一侧...

.aa {
  float: left;
  margin-right: 30px;
}

.bb {
  width: 200px;
  height: 100px;
  background-color: blue;
  clip-path: ellipse(50% 60% at 50% 100%);
}

.cc {
  width: 200px;
  height: 100px;
  background-color: brown;
}

.dd {
  float: left;
}

.ee {
  width: 200px;
  height: 100px;
  background-color: brown;
  clip-path: ellipse(50% 80%/*set the curve with this value*/
  at 50% 100%);
}

.ff {
  width: 200px;
  height: 100px;
  background-color: brown;
  color: transparent;
}

<div class="aa">
  <caption>these are parts of shape</caption>
  <div class="bb">part one</div>
  <div class="cc">part two</div>
</div>


<div class="dd">
  <caption>this is result</caption>
  <div class="ee">part three</div>
  <div class="ff">part four</div>
</div>