树枝块 - CSS

介绍

树枝块（branching）是一种可以实现分层背景图像的 CSS 技术，可以创建出呈现类似于树枝或者支架的视觉效果。它是通过 clip-path 和 background-image 属性结合创建出的。

示例

以下是一个实现树枝块的简单示例：

.branch {
  width: 600px;
  height: 400px;
  margin: 50px auto;
  position: relative;
  background: url('https://picsum.photos/600/400') center center / cover no-repeat;
}

.branch:before,
.branch:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 100%;
  background-image: inherit;
  -webkit-clip-path: polygon(0% 0%, 50% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 50% 100%, 0% 100%);
}

.branch:after {
  left: 50%;
  -webkit-clip-path: polygon(50% 0%, 100% 0%, 100% 100%);
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%);
}

通过在容器元素 .branch 中使用 :before 和 :after 伪元素，我们可以在网页上创建出左右两侧的分枝。这些分枝使用了 clip-path 属性，其作用是剪切出了一个多边形区域，从而在视觉上呈现出分支的形态。

兼容性

由于 clip-path 属性的限制，树枝块并不能在所有浏览器中都完美显示，具体支持情况请参考 Can I Use。不过，可以通过使用 JavaScript Polyfill 等技术，实现浏览器兼容性较好的树枝块。