css实现百分比投票结果柱状图显示效果代码
代码语言:html
所属分类:图表
代码描述:css实现百分比投票结果柱状图显示效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><title>html chart</title>
<style>
html,body {
padding: 0px;
margin: 0px;
font-family: monospace;
height: 100%;
}
body {
display: flex;
}
.container {
background: #FFF;
width: 400px;
margin: auto;
}
.chart {
position: relative;
padding: 0.5em;
background: #222;
border-radius: 5px;
font-size: 16px;
}
.chart * {
box-sizing: border-box;
}
.chart:after {
content: '';
position: absolute;
left: 25%;
top: 5%;
-webkit-transform: translateX(100%);
transform: translateX(100%);
width: 3px;
background: #FFF;
height: 90%;
border-radius: 2px;
}
.chart .part {
display: flex;
height: 3em;
}
.chart .part >.label {
flex: 1;
flex-basis: 25%;
text-align: right;
padding-right: 1em;
margin: 0.5em 0;
height: 2em;
line-height: 2em;
color: #FFF;
font-weight: 600;
}
.chart .part .bar {
flex: 3;
flex-basis: 75%;
position: relative;
margin: 0.5em 0;
}
.chart .part .bar:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
border-radius: 0 2px 2px 0;
}
.chart .part .bar.red:after {
background: #f22;
}
.chart .part .bar.blue:after {
background: #56a;
}
.chart .part .bar.green:after {
background: #2a5;
}
.chart .part .bar .label {
position: absolute;
top: 50%;
left: 0.5em;
-webkit-transform: translateX(0%) translateY(-50%);
transform: translateX(0%) translateY(-50%);
z-index: 1;
color: #FFF;
font-weight: 600;
}
.chart .part.percent-1 .bar:after {
width: 1%;
}
.chart .part.percent-2 .bar:after {
width: 2%;
}
.chart .part.percent-3 .bar:after {
width: 3%;
}
.chart .part.percent-4 .bar:after {
width: 4%;
}
.chart .part.percent-5 .bar:after {
width: 5%;
}
.chart .part.percent-6 .bar:after {
width: 6%;
}
.chart .part.percent-7 .bar:after {
width: 7%;
}
.chart .part.percent-8 .bar:after {
width: 8%;
}
.chart .part.percent-9 .bar:after {
width: 9%;
}
.chart .part.percent-10 .bar:after {
width: 10%;
}
.chart .part.percent-11 .bar:after {
width: 11%;
}
.chart .part.percent-12 .bar:after {
width: 12%;
}
.chart .part.percent-13 .bar:after {
width: 13%;
}
.chart .part.percent-14 .bar:after {
width: 14%;
}
.chart .part.percent-15 .bar:after {
width: 15%;
}
.chart .part.percent-16 .bar:after {
width: 16%;
}
.chart .part.percent-17 .bar:after {
width: 17%;
}
.chart .part.percent-18 .bar:after {
width: 18%;
}
.chart .part.percent-19 .bar:after {
width: 19%;
}
.chart .part.percent-20 .bar:after {
width: 20%;
}
.chart .part.percent-21 .bar:after {
width: 21%;
}
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0