如何正确操控div元素实现带双侧分支的植物形态树形展示效果

一、主分支左右显示修复 #

当前左侧分支无法正常显示的核心原因有两个：一是默认旋转基点为元素中心，旋转后分支脱离树干连接位置；二是左侧分支缺失flex布局声明、对齐属性，样式不生效。

修复后的主分支CSS： #

.result-tree .cat-branch-r {
    height: 25px;
    background-color: peru;
    border-radius: 10px;
    display: flex;
    justify-content: flex-end;
    transform: rotate(-30deg);
    /* 新增：旋转基点设为左侧连接树干的位置 */
    transform-origin: left center;
}

.result-tree .cat-branch-l {
    height: 25px;
    background-color: peru;
    border-radius: 10px;
    display: flex;
    /* 新增：左分支靠树干右侧对齐 */
    align-self: flex-end;
    justify-content: flex-start;
    /* 调整旋转角度和基点 */
    transform: rotate(30deg);
    transform-origin: right center;
}

二、次级分支扩展方案 #

采用分层结构实现次级分支：主分支内嵌套次级分支容器，每个主分支配置5个次级分支，再在次级分支上挂载叶子、果实元素。通过nth-child选择器给不同次级分支设置差异化的旋转角度、偏移量，模拟自然生长效果。

调整后的HTML结构示例（单个主分支）： #

<div data-toggle="tooltip" data-placement="top" title="Cognitive" class="cat-branch-r" style="width: 150px">
  <!-- 5个次级分支 -->
  <div class="sub-branch">
    <span class="leaf"></span>
    <!-- 后续可直接加 <span class="fruit"></span> 扩展果实 -->
  </div>
  <div class="sub-branch"><span class="leaf"></span></div>
  <div class="sub-branch"><span class="leaf"></span></div>
  <div class="sub-branch"><span class="leaf"></span></div>
  <div class="sub-branch"><span class="leaf"></span></div>
</div>

次级分支相关CSS： #

/* 主分支设置为相对定位，方便次级分支偏移 */
.cat-branch-r, .cat-branch-l {
  position: relative;
}
.sub-branch {
  position: absolute;
  width: 60px;
  height: 3px;
  background-color: peru;
}
/* 给每个次级分支设置不同位置和角度，右分支示例 */
.cat-branch-r .sub-branch:nth-child(1) {
  top: 10%;
  right: 10%;
  transform: rotate(-40deg);
}
.cat-branch-r .sub-branch:nth-child(2) {
  top: 30%;
  right: 20%;
  transform: rotate(-20deg);
}
.cat-branch-r .sub-branch:nth-child(3) {
  top: 50%;
  right: 15%;
  transform: rotate(0deg);
}
.cat-branch-r .sub-branch:nth-child(4) {
  top: 70%;
  right: 20%;
  transform: rotate(20deg);
}
.cat-branch-r .sub-branch:nth-child(5) {
  top: 90%;
  right: 10%;
  transform: rotate(40deg);
}
/* 左分支次级分支角度调整逻辑和右分支对称即可 */
.cat-branch-l .sub-branch:nth-child(1) {
  top: 10%;
  left: 10%;
  transform: rotate(40deg);
}
/* 叶子调整为相对次级分支定位 */
.sub-branch .leaf {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background-color: green;
  border-radius: 100% 0 100% 0;
  transform: translateY(-50%);
}
/* 预留果实样式 */
.sub-branch .fruit {
  position: absolute;
  right: 5px;
  top: -5px;
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 50%;
}

三、其他优化建议 #

• 可以通过CSS变量控制分支长度、角度，方便后续控制器动态修改参数
• 如需更自然的效果，可给不同叶子设置随机的大小、颜色深浅差异

内容的提问来源于stack exchange，提问作者verticallypickled