如何在 CSS 中创建这个形状？

编程问答 2022-05-28

问题描述

是否可以在不使用 svg 的情况下在 CSS 中创建此形状？基本上是底部有倒置曲线的矩形。

感谢任何帮助！

enter image description here

解决方法

您可以使用 mask-image 和 radial-gradient 来切断底部

body {
  /* demonstration purpose */
  background-image: repeating-linear-gradient(45deg,#606dbc,#606dbc 12px,#465298 12px,#465298 24px);
}

div {
  width: 200px;
  height: 120px;
  background-color: white;
  -webkit-mask-image: radial-gradient(closest-corner at 50% 175%,transparent 0%,transparent 99.5%,#fff 100%);
  mask-image: radial-gradient(closest-corner at 50% 175%,#fff 100%);
}
<div></div>

curveshapes