带有剪辑路径的自定义形状

Question

div {
  position: fixed;
  bottom: 0;
   background-color: green;
   height: 50vh;
   width: 100vw;
}

<div></div>

可以用clip-path和svg来做这种形状吗？我需要在移动设备上有这种从下到上的模式

要求是：

1. 这个有 Lorem 的地方...可以根据内容有不同的高度
2. “山”/形状应始终具有相同的大小，与移动设备宽度无关
3. 我应该能够为整个元素应用任何带有颜色或图像的背景

Answer 1

我个人完全不知道如何做到这一点，所以去 Reddit 上找到了一些东西，并将这些代码放在一起。其中一些是我制作的，其中一些是我拍摄和修改的代码示例。尝试使用这个。

HTML：

<div class="modal">
  <div class="content">
    <!-- Your dynamic content goes here -->
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <svg class="hill-shape" viewBox="0 0 100 10" preserveAspectRatio="none">
    <path d="M0,10 Q50,0 100,10 Z" fill="green" />
  </svg>
</div>

CSS：

.modal {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  background-color: transparent; /* Set your desired background color or image */
  overflow: hidden; /* Hide the overflowing hill shape */
}

.content {
  padding: 20px; /* Adjust as needed */
}

.hill-shape {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px; /* Adjust the height of the hill shape */
  fill: green; /* Same color as the background */
}

• .modal

  div 包含您的动态内容（例如文本、图像）。

• .hill-shape

  SVG 元素使用二次贝塞尔曲线 (Q) 路径创建“山” 形状。

• 调整 viewBox 和路径坐标以适合您所需的形状和大小。

• preserveAspectRatio="none"

  确保SVG按比例缩放。

• 填充属性设置山形的颜色（与背景相同）。