代码之家 › 专栏 › 技术社区 › Damian Busz

html5视频上的六边形切割边缘

css-shapes css html

Damian Busz · 技术社区 · 7 年前

html5 (mp4) 拥有 hexagon edges 900x600

有人能帮忙吗?

2 回复 | 直到 7 年前

Nishant Singh 7 年前

你可以通过使用简单的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 对于任何查询,请对其进行注释。

Storm 7 年前

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

利用 :before :after https://jsfiddle.net/rckndxbx/

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

Mass · 如何在Tailwind CSS v4中创建配置

4 月前

magenta placenta · 将css变量合并为一个变量

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

5 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

5 月前

Luckkks · 过渡色工作不正常

5 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

5 月前