漏斗图与酒吧

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>