马黑黑 发表于 2022-4-12 13:47

CSS绘制圆柱体

<style>
.mnDiv {
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 500px;
        background: #000;
}
.circle {
        position: absolute;
        width: 80px;
        height: 280px;
        background: rgba(160,180,45,.6);
}
.circle::before, .circle::after {
        content: '';
        position: absolute;
        width: inherit;
        height: 50px;
        background: rgba(160,180,45,.95);
        border-radius: 50%;
}
.circle::before { top: -25px; }
.circle::after { bottom: -25px; }

</style>

<div class="mnDiv">
        <div class="circle"></div>
</div>

马黑黑 发表于 2022-4-12 13:53

这个其实是2d的东东，看上去像立体。HTML是两层结构：黑色部分是展示场所，是父层，使用flex布局令所有子元素与其同圆心；圆柱部分用到一个div盒子，是个无边框的矩形，用两个伪元素做顶部部和底部，形状为椭圆。
<style>
.mnDiv {
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 600px;
        height: 500px;
        background: #000;
}
.circle {
        position: absolute;
        width: 80px;
        height: 280px;
        background: rgba(160,180,45,.6);
}
.circle::before, .circle::after {
        content: '';
        position: absolute;
        width: inherit;
        height: 50px;
        background: rgba(160,180,45,.95);
        border-radius: 50%;
}
.circle::before { top: -25px; }
.circle::after { bottom: -25px; }

</style>

<div class="mnDiv">
        <div class="circle"></div>
</div>

红影 发表于 2022-4-12 20:33

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

马黑黑 发表于 2022-4-12 22:13

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

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

红影 发表于 2022-4-13 20:01

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

因为颜色完全充满了{:4_173:}

马黑黑 发表于 2022-4-13 20:33

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

嗯，100分

加林森 发表于 2022-4-13 21:22

来学习

马黑黑 发表于 2022-4-13 22:05

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

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

红影 发表于 2022-4-15 09:33

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

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

马黑黑 发表于 2022-4-15 12:43

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

大概是酱紫
页: [1]
查看完整版本: CSS绘制圆柱体