如何用 CSS 绘制分支

CSS 可以使用伪元素 `::before` 和 `::after` 来绘制分支。下面是一个简单的例子：

HTML 代码：

<div class="branch"></div>

CSS 代码：

.branch {
  position: relative;
  width: 0;
  height: 0;
  border-top: 50px solid green;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

.branch::before {
  content: "";
  position: absolute;
  top: 50px;
  left: -25px;
  width: 0;
  height: 0;
  border-top: 50px solid green;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  transform: rotate(-45deg);
}

.branch::after {
  content: "";
  position: absolute;
  top: 50px;
  right: -25px;
  width: 0;
  height: 0;
  border-top: 50px solid green;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  transform: rotate(45deg);
}

这段代码会生成一个三角形，类似于分支的形状。可以通过调整 `border-top`，`border-left` 和 `border-right` 的值来改变分支的大小和形状。