CSS绘制圆柱体

马黑黑

马黑黑

这个其实是2d的东东，看上去像立体。HTML是两层结构：黑色部分是展示场所，是父层，使用flex布局令所有子元素与其同圆心；圆柱部分用到一个div盒子，是个无边框的矩形，用两个伪元素做顶部部和底部，形状为椭圆。

1. <style>
   
2. .mnDiv {
   
3.         margin: auto;
   
4.         display: flex;
   
5.         justify-content: center;
   
6.         align-items: center;
   
7.         width: 600px;
   
8.         height: 500px;
   
9.         background: #000;
   
10. }
    
11. .circle {
    
12.         position: absolute;
    
13.         width: 80px;
    
14.         height: 280px;
    
15.         background: rgba(160,180,45,.6);
    
16. }
    
17. .circle::before, .circle::after {
    
18.         content: '';
    
19.         position: absolute;
    
20.         width: inherit;
    
21.         height: 50px;
    
22.         background: rgba(160,180,45,.95);
    
23.         border-radius: 50%;
    
24. }
    
25. .circle::before { top: -25px; }
    
26. .circle::after { bottom: -25px; }
    
27. 
    
28. </style>
    
29. 
    
30. <div class="mnDiv">
    
31.         <div class="circle"></div>
    
32. </div>

复制代码

红影

椭圆形的当中有条横线，是因为长方形的盒子的关系么。
黑黑聪明，圆柱也能绘制出来

马黑黑

红影 发表于 2022-4-12 20:33
椭圆形的当中有条横线，是因为长方形的盒子的关系么。
黑黑聪明，圆柱也能绘制出来

是透明的关系，如果透明度木有，就木有这个横线。想象为什么

红影

马黑黑 发表于 2022-4-12 22:13
是透明的关系，如果透明度木有，就木有这个横线。想象为什么

因为颜色完全充满了

马黑黑

红影 发表于 2022-4-13 20:01
因为颜色完全充满了

嗯，100分

加林森

来学习

马黑黑

红影 发表于 2022-4-13 20:01
因为颜色完全充满了

是的。顶部和底部设有一定透明度，然后是伪元素与元素之间的遮罩问题产生的中间有分界的效果。

红影

马黑黑 发表于 2022-4-13 22:05
是的。顶部和底部设有一定透明度，然后是伪元素与元素之间的遮罩问题产生的中间有分界的效果。

有透明的好，更利于理解。

马黑黑

红影 发表于 2022-4-15 09:33
有透明的好，更利于理解。

大概是酱紫