html实现三角形树状图,图解利用CSS实现三角形

要实现一个三角形树状图，可以使用HTML和CSS来创建。以下是一种方法：

1. 在HTML中创建一个ul列表，并为其添加一个类名。

<ul class="tree">
  <li>Node 1
    <ul>
      <li>Node 1.1</li>
      <li>Node 1.2</li>
    </ul>
  </li>
  <li>Node 2</li>
  <li>Node 3
    <ul>
      <li>Node 3.1
        <ul>
          <li>Node 3.1.1</li>
          <li>Node 3.1.2</li>
        </ul>
      </li>
      <li>Node 3.2</li>
    </ul>
  </li>
</ul>

2. 使用CSS样式来设置三角形形状。

.tree li {
  position: relative;
  padding-left: 20px;
  list-style: none;
}

.tree li:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #ccc;
}

.tree li:last-child:before {
  border-right: none;
}

在上面的CSS样式中，我们使用:before伪元素来创建三角形。我们使用了边框属性来设置三角形的形状。这个三角形是通过设置顶部和底部边框的宽度为0，右边框的宽度为10px来实现的。我们还设置了三角形的颜色为灰色。

最后，我们还设置了最后一个li元素的:before伪元素的右边框为none，以防止最后一个节点出现多余的三角形。

通过这种方法，我们可以轻松地创建一个三角形树状图，如下所示：