[Solved] Funnel chart with bars [closed]

by


Use clipping with polygon. My polygons go from upper left, to upper right, to lower right, to lower left. I used the css calc function in order to make the offset relative to the end. I did a 40px slant, but if you want more a slant, simply change that number.

body {
  background:black;
}

.slant {
  height:100px;
  background:blue;
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%);
}

.slant.outside {
  width:200px;
  background:#1384dd;
}

.slant.inside {
  width:100px;
  background:#addafd;
}

.slant.insideInside {
  width:60px;
  background:white;
}
<div class="slant outside">
  <div class="slant inside">
    <div class="slant insideInside"></div>
  </div>
</div>

solved Funnel chart with bars [closed]