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-image: linear-gradient(
            var(--leaf-gr-dir, to bottom right), 
            transparent, 
            rgb(0 0 0 / 0.2) calc(50% - var(--stem-width) / 2), 
            rgba(0 0 0 /0.5) calc(50% + var(--stem-width) / 2), 
            transparent);
          box-shadow:
            inset 2px 2px 4px rgb(255 255 255 / .25),
            inset -2px -2px 4px rgb(0 0 0 / .25);
        }
        /* leaf */ /*override left*/
        .ul-plant_leaf:nth-child(odd) { 
          --leaf-gr-dir: to bottom left; 
          --gc: 1; 
          border-radius: 0 var(--br) 0 var(--br)
        }
        /* leaf position second */
        .ul-plant_leaf:nth-child(2) { grid-row: 2/4 }
        
        /* stems gradient */
        .ul-plant_leaf::before, .ul-plant_leaf::after{
          background-image: linear-gradient(var(--stem-gr-dir), rgba(0 0 0 / 0.5), transparent);
        }
        /* diagonal stem */ /*default right*/
        .ul-plant_leaf::after{
          content: "";
          position: absolute;.........完整代码请登录后点击上方下载按钮下载查看