html5視頻上的六邊形切割邊緣

Question

我想弄清楚的是如何使html5視頻(mp4)擁有hexagon edges。我的視頻尺寸是900x600，它是一個正方形，我嘗試將它改爲六角形。

任何人都可以幫忙嗎？

Answer 1

不是我所知道的..你可以在css中製作一個六角形並將它粘在上面，但是這當然會切斷你的一些視頻。

編輯：我以前的意思是，他可以編輯視頻或類似的東西，因爲你不會在CSS中獲得完美的六邊形。總之，這裏是您的解決方案：

利用的:before和:afterhttps://jsfiddle.net/rckndxbx/

Answer 2

您可以通過使用簡單的CSS

video{ 
     -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
} 

這將顯示您的視頻作爲六角形做到這一點。 瞭解它更好遵循鏈接clipping video 對於任何查詢評論它。 一切順利。