英文:
Is there a way to create a triangle display of a HTML video tag using CSS border-radius?
问题
我正在尝试在三角形显示中展示HTML视频标签，而不是默认的矩形显示。这意味着默认显示如下：
<!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 创建HTML视频标签的三角形显示？或者是否可以提供一些建议，告诉我如何完成这个任务？
英文:
I am attempting to show a HTML video tag in a triangle display. So, as opposed to the default rectangle display; a triangle. Meaning, here's the default display:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
Notice how the default display is the rectangle form - my aim is to get the display in a triangle form - like this:
I am trying to use CSS to accomplish this task, specifically border-top-left radius and border-top-right-radius, but I can only get it to curve. Here's the code below:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
video {
border-top-left-radius: 200px;
border-top-right-radius: 200px;
overflow: hidden;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
The problem I'm running into, as you can see from the code snippet above, the left and right angles only curve as opposed to forming a point. Therefore, is it possible to create a triangle display of a HTML video tag using CSS border-radius? Or can someone provide some additional guidance as to what I should be using to accomplish this task?
答案1
得分: 2
I doubt this is possible with 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>
英文:
I doubt this is possible with border-radius.
But you can achieve this with clip-path
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
video {
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论