发布于2021-09-15 22:22 阅读(423) 评论(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/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!