css实现圆柱体

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>
相关推荐
万邦科技Lafite4 分钟前
京东按图搜索京东商品(拍立淘) API (.jd.item_search_img)快速抓取数据
开发语言·前端·数据库·python·电商开放平台·京东开放平台
一只小透明啊啊啊啊3 小时前
Java Web 开发的核心组件:Servlet, JSP,Filter,Listener
java·前端·servlet
你的人类朋友3 小时前
设计模式有哪几类?
前端·后端·设计模式
Yeats_Liao3 小时前
Go Web 编程快速入门 10 - 数据库集成与ORM:连接池、查询优化与事务管理
前端·数据库·后端·golang
啃火龙果的兔子4 小时前
前端八股文react篇
前端·react.js·前端框架
打小就很皮...4 小时前
React 实现 i18next 中英文切换集成
前端·react.js·i18next
拉不动的猪4 小时前
函数组件和异步组件
前端·javascript·面试
淮北4944 小时前
html + css +js
开发语言·前端·javascript·css·html
你的人类朋友4 小时前
适配器模式:适配就完事了bro!
前端·后端·设计模式
Setsuna_F_Seiei4 小时前
CocosCreator 游戏开发 - 利用 AssetsBundle 技术对小游戏包体积进行优化
前端·cocos creator·游戏开发