这种堆积条形图用Html5,怎么写?能否给建议,最好贴相似代码
1条回答 默认 最新
- 前端互助会 2022-01-20 16:58关注
思路
根据你图上的就很简单;
一个大div,里面有三个小div;宽度使用百分比;
50%的色块使用决定定位;
简单效果代码
<!DOCTYPE html> <html> <head> <style> html,body{ height: 100%; } .box{ width: 200px; height: 32px; display: flex; position: relative; top:200px; } .box>div:nth-child(1){ background: red;height: 100%; color: #ffffff; } .box>div:nth-child(2){ background: #5FB28C;height: 100%; color: #ffffff; } .box>div:nth-child(3){ background: #3A8EE1;height: 100%; color: #ffffff; } .bfb{ width: 30px; height: 30px; color: #ffffff; background: red; position: absolute; top:-40px; left:25%; } </style> </head> <body> <div class="box"> <div style="width: 50%">生活质量下降</div> <div style="width: 20%">持平</div> <div style="width: 30%">上升</div> <div class="bfb">25%</div> </div> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报 编辑记录
悬赏问题
- ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
- ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
- ¥15 手机接入宽带网线,如何释放宽带全部速度
- ¥30 关于#r语言#的问题:如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
- ¥15 ETLCloud 处理json多层级问题
- ¥15 matlab中使用gurobi时报错
- ¥15 这个主板怎么能扩出一两个sata口
- ¥15 不是,这到底错哪儿了😭
- ¥15 2020长安杯与连接网探
- ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么