clip - path 多个区域

### 使用 `clip-path` 创建多个区域

CSS 的 `clip-path` 属性允许创建复杂的剪裁路径来定义可见区域。然而，标准 CSS 并不直接支持通过单个 `clip-path` 定义多个独立的可视区域。为了实现这一效果，通常采用以下几种方法之一：

#### 方法一：组合多个伪元素
可以利用 ::before 和 ::after 伪类，在同一个 HTML 元素上应用不同的 `clip-path`。

.element {
    position: relative;
}

.element::before,
.element::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
    
.element::before {
    background-color: red;
    clip-path: polygon(25% 0%, 75% 0%, 50% 50%);
}

.element::after {
    background-color: blue;
    clip-path: polygon(25% 100%, 75% 100%, 50% 50%);
}

这种方法适用于简单的多边形布局[^1]。

#### 方法二：SVG 剪切路径
对于更复杂的情况，推荐使用 SVG 来定义剪辑路径并将其应用于目标元素。

<svg style="display:none;">
  <defs>
    <clipPath id="multi-region">
      <!-- 复杂形状 -->
      <rect x="10%" y="10%" width="80%" height="40%" />
      <circle cx="50%" cy="75%" r="30%" />
    </clipPath>
  </defs>
</svg>

<div class="clipped-element" style="-webkit-clip-path:url(#multi-region); clip-path:url(#multi-region);">
  Content here...
</div>

此方案提供了更大的灵活性和精确度。

#### 方法三：JavaScript 动态计算
当需要动态调整或响应用户交互时，可以通过 JavaScript 计算各个区域的位置尺寸，并相应更新内联样式中的 `clip-path` 属性值。

const element = document.querySelector('.dynamic-clipping');
// 更新 clip-path ...
element.style.clipPath = 'polygon(...)';

这种方式适合于高度定制化的场景。