MediaWiki:PyramidChart.css

ol.pyramid-chart { margin-inline-start: 0; } .pyramid-chart li { margin: auto; border-bottom-width: 35px; border-bottom-style: solid; border-left: 20px solid transparent; border-right: 20px solid transparent; padding: 0; list-style: none; transition: opacity 0.5s; } .pyramid-chart li:hover { opacity: 0.8; } .pyramid-chart li div { position: absolute; transform: translate(-50%, 25%); left: 50%; color: #fff; } .pyramid-chart li:nth-child(1) div { transform: translate(-50%, 85%); } .pyramid-chart li:nth-child(1) { border-bottom: 50px solid #7d0916; border-left: 30px solid transparent; border-right: 30px solid transparent; width: 0; } .pyramid-chart li:nth-child(2) { border-bottom-color: #992b82; width: 100px; } .pyramid-chart li:nth-child(3) { border-bottom-color: #8168c4; width: 140px; } .pyramid-chart li:nth-child(4) { border-bottom-color: #749fd4; width: 180px; } .pyramid-chart li:nth-child(5) { border-bottom-color: #91bfa6; width: 220px; } .pyramid-chart li:nth-child(6 ){ border-bottom-color: #e6af97; width: 260px; } .pyramid-chart li:nth-child(7) { border-bottom-color: #f0bbee; width: 300px; } .pyramid-chart li:nth-child(8) { border-bottom-color: #d46174; width: 340px; } .pyramid-chart li:nth-child(9) { border-bottom-color: #d6d36d; width: 380px; } .pyramid-chart li:nth-child(10) { border-bottom-color: #6e4a85; width: 420px; } .pyramid-chart li:nth-child(11) { border-bottom-color: #61c283; width: 460px; } .pyramid-chart li:nth-child(12) { border-bottom-color: #658ebf; width: 500px; } .pyramid-chart li:nth-child(13) { border-bottom-color: #ffb3d3; width: 540px; } .pyramid-chart li:nth-child(14) { border-bottom-color: #7525e6; width: 580px; }