能否通过CSS border-radius实现HTML video标签的三角形显示？

问题 #

我想把HTML的video标签改成三角形显示（类似下图效果），而不是默认的矩形。

默认的video代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Video Default</title>
</head>
<body>
  <video width="640" height="360" controls>
  <source src="https://durendel.com/event/theater/gravityphase.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
</body>
</html>

我试过用CSS的border-top-left-radius和border-top-right-radius属性，但只能让边角变弯，出不了尖角：

video {
  border-top-left-radius: 200px;
  border-top-right-radius: 200px;
  overflow: hidden;
}

<!DOCTYPE html>
<html>
<head>
  <title>Video</title>
</head>
<body>
  <video width="640" height="360" controls>
    <source src="https://durendel.com/event/theater/gravityphase.mp4" type="video/mp4"> Your browser does not support the video tag.
    </video>
</body>
</html>

请问能不能用CSS border-radius实现video的三角形显示？或者有其他可行的办法？

解决方案 #

1. 无法用border-radius实现三角形 #

border-radius的核心作用是给元素添加圆角，本质是用圆弧切割元素边角，完全无法生成带尖角的三角形形状，你的尝试方向不对，得换其他方法。

2. 推荐用CSS clip-path实现 #

clip-path可以直接定义元素的可见区域，是实现自定义形状最便捷的方案，示例代码如下：

实现顶部三角形（匹配你提供的示例图效果）

<!DOCTYPE html>
<html>
<head>
  <title>Triangle Video</title>
  <style>
    .triangle-video-container {
      width: 640px;
      height: 360px;
      /* 定义三角形可见区域：顶部中点、左下角、右下角 */
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      overflow: hidden;
      margin: 0 auto;
    }
    .triangle-video-container video {
      width: 100%;
      height: 100%;
      /* 让视频填满容器，避免拉伸变形 */
      object-fit: cover;
    }
  </style>
</head>
<body>
  <div class="triangle-video-container">
    <video controls>
      <source src="https://durendel.com/event/theater/gravityphase.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
</body>
</html>

• 用容器包裹video是因为直接给video加clip-path可能会连带裁剪掉控件（部分浏览器存在这个问题），通过容器裁剪更稳妥。
• 可以调整polygon()里的坐标值，实现不同方向的三角形。

3. 兼容老浏览器的备选方案：遮罩层 #

如果需要兼容IE这类不支持clip-path的浏览器，可以用三角形遮罩层覆盖在video上方：

<!DOCTYPE html>
<html>
<head>
  <title>Triangle Video with Mask</title>
  <style>
    .video-wrapper {
      position: relative;
      width: 640px;
      height: 360px;
      margin: 0 auto;
    }
    .video-wrapper video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .triangle-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* 用border生成倒三角，颜色要和页面背景一致 */
      border-left: 320px solid transparent;
      border-right: 320px solid transparent;
      border-bottom: 360px solid #fff;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="video-wrapper">
    <video controls>
      <source src="https://durendel.com/event/theater/gravityphase.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    <div class="triangle-mask"></div>
  </div>
</body>
</html>

• 这个方法通过border生成倒三角遮罩，覆盖video上半部分，只露出下方的三角形区域。
• 注意遮罩颜色必须和页面背景色一致，否则会露出遮罩本身的颜色。

内容的提问来源于stack exchange，提问作者Pyli