横向叠加的柱状图怎么做_如何用div拼接一个好看的横向柱状图

市面上的各种各样的柱状图，虽然好看，但是难免过于花哨，有没有心意，

而我们的设计师往往倾向清新素丽的风格，这个就是考验我们的时候啦~

废话不多说 ， 直接上代码

自定义插件

html,div,body,p,ul,li{

padding: 0;

margin: 0;

text-decoration: none;

list-style-type: none;

}

body{

overflow-y: scroll;

}

.container{

}

.container-fluid{

padding: 0px 80px;

}

.container-fluid{

height: 36px;

line-height: 36px;

}

.bar-header{

height: 60px;

line-height: 60px;

}

.bar-header .header-left{

}

.bar-header .header-right h3,

.bar-header .header-left h3{

color: #394C93;

font-size: 20px;

position: relative;

margin: 0px;

padding-right: 20px;

}

.bar-h