css实现树枝树木结构鱼骨图分支效果代码-html代码-BFW代码库

css实现树枝树木结构鱼骨图分支效果代码

代码语言：html

代码描述：css实现树枝树木结构鱼骨图分支效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
        /* ul-plant reset */
        .ul-plant, .ul-plant::before, .ul-plant::after, 
        .ul-plant_leaf, .ul-plant_leaf::before, .ul-plant_leaf::after { 
          margin: 0; padding: 0; list-style: none; box-sizing: border-box 
        }
        
        /* ul-plant layout */
        .ul-plant { 
          font-size: 1.2rem;
          --leaf-width: 1fr; /*or fixed unit*/
          --stem-width: 0.5rem;
          --col-gap: 2rem;
          --row-gap: calc(var(--col-gap) / 2);
          display: grid; 
          grid-template-columns: repeat(2, var(--leaf-width)); 
          gap: var(--row-gap) var(--col-gap); 
          position: relative;
          text-shadow: 0 0 0.25rem black
        }
        /* spacing bottom */
        .ul-plant::after{ content: ""; aspect-ratio: 1/1 }
        /* ground */
        .ul-plant::before{
          content: "";
          position: absolute;
          background-color: var(--grass-color, green);
          --p1: 25%;
          background-image: 
            linear-gradient(transparent, rgb(0 0 0 / .5) var(--p1), transparent var(--p1), rgb(0 0 0)),
            linear-gradient(var(--grass-color) var(--p1), var(--ground-color) 0);
          height: calc(var(--stem-width) * 3);
          width: 50%;
          transform: translateX(50%);
          bottom: 0;
        }
        /* leaf */ /*default right*/
        .ul-plant_leaf { 
          grid-row: span 2; 
          aspect-ratio: 1; 
          display: grid; 
          place-items: center;
          position: relative;
          --br: 50%;
          border-radius: var(--br) 0 var(--br) 0;
          grid-column: var(--gc, 2);
          background-color: var(--leaf-color, green); 
          color: white; 
          padding: 1rem;
          background-im.........完整代码请登录后点击上方下载按钮下载查看