I am currently working on an interesting project where I want to display an HTML video tag in a unique triangle shape rather than the conventional rectangle form. Here is the default display:
<!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>As you can see, the default display is rectangular and I am aiming to achieve a triangular shape like this:
https://i.sstatic.net/HsgZF.jpg
I have been exploring the use of CSS to achieve this effect, specifically with the border-top-left radius and border-top-right-radius properties but I am only able to get curved shapes. Here is the code snippet:
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>The issue I am facing, as evident from the code above, is that the corners only curve instead of forming a pointed triangle. So my question is, is it possible to create a triangular display for an HTML video tag using CSS border-radius? Or could someone offer guidance on what approach I should take to achieve this desired outcome?