带条形的漏斗图

Question

是否可以把右端的矩形切掉（如下图）：

尝试使用 css skew 但它的两端都被切断了，我只需要像漏斗一样正确。

Answer 1

对多边形使用剪裁。我的多边形从左上角到右上角、右下角、左下角。我使用 css calc 函数来相对于末尾进行偏移。我做了 40px 倾斜，但如果你想要更多倾斜，只需更改该数字即可。

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>

带条形的漏斗图

Funnel chart with bars

html

css

jquery

css-shapes