本站消息

站长简介/公众号


站长简介:逗比程序员,理工宅男,前每日优鲜python全栈开发工程师,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-03(314)

2021-04(178)

2021-05(171)

2021-06(96)

2021-07(5)

纯css实现圆柱体-超简单!

发布于2021-09-15 22:22     阅读(43)     评论(0)     点赞(1)     收藏(0)


写在前面的话:

    在日常的工作中遇到一个需求,需要用圆柱体来表现每个项目的比例,首先想到的会事使用echarts中的柱状图来表现,但是为了一个圆柱体引用那么庞大的js库有点不合时宜的味道。其次是想到使用canvas画布工具里封装一个小插件供系统使用,可是要百度啥的,目前俺还不是很能熟练使用canvas,而且考虑再三之后使用纯css 是可以满足目前的开发要求的。

正文:

首先定义结构:

点击查看代码
<div class="lui-column-bg">
<div class="lui-inner" style="height: 50%;">
</div>
</div>

 

.lui-column-bg 用来做父容器其中的.lui-inner 作为子容器其高度和父容器的高度的百分比作为 项目比。

其次是css,使用伪类元素before和after作为圆柱的上下底面。使用渐变的背景使得圆柱体更加立体一点。

 

点击查看代码
复制代码
.lui-column-bg {
            position: relative;
            width: 50px;
            height: 90px;
            margin: 100px auto;
            background-color: transparent;
            background-color: rgba(0, 199, 159, 0.2);
        }
        .lui-column-bg:before {
            position: absolute;
            content: '';
            display: block;
            height: 20px;
            width: 100%;
            border-radius: 50%;
            top: -10.5px;
            z-index: 1;
            background-color: rgb(101 221 197);
        }

        .lui-column-bg:after {
            position: absolute;
            content: '';
            display: block;
            height: 15px;
            width: 100%;
            border-radius: 50%;
            bottom: -10px;
            background-color: rgb(0, 255, 204);
        }

        .lui-inner {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 50%;
            background-image: linear-gradient(to top, rgb(0, 255, 204), rgb(0, 199, 159));
            text-align: center;
        }
        .lui-inner::before {
            position: absolute;
            content: '';
            display: block;
            height: 20px;
            width: 100%;
            background-color: rgb(0, 199, 159);
            border-radius: 50%;
            top: -10.5px;
            z-index: 1;
        }
        .lui-inner:after {
            position: absolute;
            content: '';
            display: block;
            height: 15px;
            width: 100%;
            border-radius: 50%;
            background-color: white;
            bottom: -10px;
        }
复制代码

效果如下:

最后附上完整的代码:

点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css实现圆柱体</title>
<style>
.lui-column-bg {
position: relative;
width: 50px;
height: 90px;
margin: 100px auto;
background-color: transparent;
background-color: rgba(0, 199, 159, 0.2);
}
.lui-column-bg:before {
position: absolute;
content: '';
display: block;
height: 20px;
width: 100%;
border-radius: 50%;
top: -10.5px;
z-index: 1;
background-color: rgb(101 221 197);
}
.lui-column-bg:after {
position: absolute;
content: '';
display: block;
height: 15px;
width: 100%;
border-radius: 50%;
bottom: -10px;
background-color: rgb(0, 255, 204);
}
.lui-inner {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
background-image: linear-gradient(to top, rgb(0, 255, 204), rgb(0, 199, 159));
text-align: center;
}
.lui-inner::before {
position: absolute;
content: '';
display: block;
height: 20px;
width: 100%;
background-color: rgb(0, 199, 159);
border-radius: 50%;
top: -10.5px;
z-index: 1;
}
.lui-inner:after {
position: absolute;
content: '';
display: block;
height: 15px;
width: 100%;
border-radius: 50%;
background-color: white;
bottom: -10px;
}
</style>
</head>
<body>
<div class="lui-column-bg">
<div class="lui-inner" style="height: 50%;">
</div>
</div>
</body>
</html>

感觉还可以的话留下你的赞是对我最大的鼓励@_@




所属网站分类: 技术文章 > 博客

作者:西门费雪

链接:http://www.qianduanheidong.com/blog/article/192693/c8528b29b44fe607479c/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

1 0
收藏该文
已收藏

评论内容:(最多支持255个字符)