如何從JS橫幅剪切形狀？

Question

我目前正在爲客戶端開發一個PSD（如下圖所示），並且正在尋找關於如何從JS滑塊切割特定形狀的指導。我的初始思考過程是在橫幅底部疊加CSS形狀以獲得所需的效果，如圖所示。

我想知道是否有替代方法。我在網上瀏覽過，但無法找到我想要完成的更多信息。

歡迎任何建議。先謝謝你。

Answer 1

您還可以使用視口寬度來達到這個目的。我希望這對你有所幫助。

.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 2

你可以創建CSS夾路徑使用this工具。

一個例子是：

.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 3

這正是類似這樣的網站。您將通過詳細觀察現場找到完整的解決方案。點擊以下得到解決

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