如何从JS横幅剪切形状？

Question

我目前正在为客户制作PSD（如下图所示），并正在寻找如何从JS滑块切割特定形状的指导。我最初的思考过程是在横幅底部叠加css形状以获得所需的效果，如图所示。

我想知道是否有替代方法。我在互联网上环顾四周，但无法找到有关我想要完成的内容的更多信息。

欢迎所有建议。先感谢您。

Answer 1

您可以使用this工具创建CSS剪辑路径。

一个例子是：

.container {
  background-color: orangered;
  width: 100%;
  height: 200px;
  -webkit-clip-path: polygon(100% 0%, 100% 75%, 50% 100%, 0 75%, 0 0);
  clip-path: polygon(100% 0%, 100% 75%, 50% 100%, 0 75%, 0 0);
}

<div class="container"></div>

Answer 2

您还可以使用视口宽度来实现此目标。我希望它对你有所帮助。

.box {
  width: 100%;
  height: 300px;
  position:relative;
  background: #000;
}

.box:before
{
 border-top:80px solid transparent;
 border-left: 50vw solid #fff;
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
}

.box:after
{
 border-top:80px solid transparent;
 border-right: 50vw solid #fff;
 content: '';
 position: absolute;
 bottom: 0;
 right: 0;
}

<div class="box"></div>

Answer 3

这与此网站完全相似。您只需通过详细观察站点即可找到完整的解决方案。点击下面获取解决方案

http://www.stomprealty.com/about/about-stomp/