html5 视频的六边形切边

Question

我想弄清楚的是如何制作一个 html5 视频(mp4) 以获得 hexagon edges。我的视频大小是900x600而且是正方形，我试着把它变成六边形。

有人可以帮忙吗？

Answer 1

据我所知……您可以在 css 中制作一个六边形并将其粘贴在顶部，但这当然会切断您的一些视频。

编辑：我之前的意思是他可以编辑视频或类似的东西，因为你不会在 css 中得到完美的六边形。无论如何，这是您的解决方案：

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

Answer 2

You can do it by using simple 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%);
}

这会将您的视频显示为六边形。要更好地理解它，请遵循 link clipping video 对于任何查询评论它。祝一切顺利。

html5 视频的六边形切边

Hexagon cutted edges on html5 video

html

css

css-shapes