css实现圆柱_css 3d 圆柱

​​​​​​纯css实现圆柱体-超简单！ - 走看看

css实现圆柱的形状_爱吃烧鸭蛋的叶安的博客-CSDN博客_css实现圆柱体

/*外柱子*/
<div 
  className="yellow-out-bar" 
/* 外柱子 = 外柱子+内柱子 保证外柱子永远比内柱子 高*/
  style={{ height: multiply(add(外柱子, 内柱子)), 2.5) }}
>
/*内柱子*/
  <div 
   className="yellow-inner-bar" 
   style={{ height: multiply(内柱子, 1.5) }} 
  />
</div>
 
 
 
 
 
/* 黄色柱子 */
  .yellow-out-bar {
    position: relative;
    width: 26px;
    background-color: transparent;
    border-right: 1px solid #c1a237;
    border-left: 1px solid #b49133;
    background-image: linear-gradient(to left,rgb(156 115 42 / 51%),30%,#af8b30cc,rgb(33 87 129 / 36%));
  }
        .yellow-out-bar:before {
          position: absolute;
          content: '';
          display: block;
          height: 22px;
          width: 100%;
          border-radius: 50%;
          top: -10.5px;
          z-index: 4;
          background-color: rgb(175 139 48);
          border: 1px solid #f9e963;
        }
 
        .yellow-out-bar:after {
          position: absolute;
          content: '';
          display: block;
          height: 18px;
          width: 100%;
          border-radius: 50%;
          bottom: -10px;
          border: 1px solid #bba53d;
          background-image: linear-gradient(to left,rgb(82 42 6),72% ,#9b8319);
}
 
        .yellow-inner-bar {
          border-left: #feee6b;
          border-right: #feee6b;
          position: absolute;
          bottom: 5px;
          width: 20px;
          left: 2px;
          height: 50%;
          background-image: linear-gradient(to left,rgb(221 203 70),82% ,#e7d74a);
          text-align: center;
          z-index: 3;
        }
        .yellow-inner-bar::before {
          position: absolute;
          content: '';
          display: block;
          height: 17px;
          width: 100%;
          background-color: rgb(221 202 67 / 90%);
          border-radius: 50%;
          top: -9.5px;
          z-index: 1;
          border: 1px solid rgb(229 241 134);
        }
        .yellow-inner-bar:after {
          position: absolute;
          content: '';
          display: block;
          height: 17px;
          width: 100%;
          border-radius: 50%;
          background-color: #e9d849;
          background-image: linear-gradient(to left,rgb(222 203 70),82% ,#f4e350);
          bottom: -10px;
          z-index: 2;
          border-bottom: 1px solid #f8eb65;
        }
 
`