css实现圆柱体

Jolyne_2025-04-08 17:20

css 实现上面的这种圆柱体，本文记录的是单个圆柱体

思路

一个 container.div, relative
两个子 div，分别为最上面的圆圈和柱体, 圆圈 absolute top-0 left-0 w-full rounded-[50%]，柱体 mt-[圆圈一半的高度]

代码

react + css

tsx 复制代码

            <div
              // container 相对定位，随便给个尺寸
              className=" relative h-[200px] w-[100px]"
            >
            
              // 圆圈部分
              <div
                // 子绝父相 宽度撑满父元素
                className="absolute w-full h-[40px] top-0 left-0 rounded-[50%]"
                style={{
                  // 随便来个背景色
                  background: `linear-gradient(180deg, ${r.bg[0]} 0%, ${r.bg[1]} 100%)`,
                }}
              ></div>
              
              // 柱体部分
              <div
                // 圆圈是40px高，所以柱体 mt 值是 20px，即圆圈高的一半即可 pt-[30px] 主要是显示文字
                className="mt-[20px] pt-[30px] text-center w-full h-[100px]"
                style={{
                  // 随便来个背景色
                  background: `linear-gradient(180deg, ${r.bg[0]} 0%, ${r.bg[1]} 100%)`,
                }}
              >
                // 柱体中的文字
                <span className="text-white text-shadow-xs">文字文字文字</span>
              </div>
            </div>