我正在尝试在三 Angular 形显示中显示 HTML 视频标签。因此，与默认的矩形显示相反；一个三 Angular 形。意思是，这是默认显示:
<!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>请注意默认显示是矩形形式 - 我的目标是以 三 Angular 形 形式显示 - 像这样:
我正在尝试使用 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>我遇到的问题，正如您从上面的代码片段中看到的，左 Angular 和右 Angular 仅 flex 而不是形成点。因此，是否可以使用 CSS border-radius 创建 HTML 视频标签的三 Angular 形显示？或者有人可以提供一些额外的指导来指导我应该使用什么来完成这项任务？
最佳答案
我怀疑这对于 border-radius 是否可行。
但是你可以通过clip-path来实现这一点
video {
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}<!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>关于html - 有没有办法使用 CSS border-radius 创建 HTML 视频标签的三 Angular 形显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/75365078/