is there a way (probably with webGL, maybe also with three.js) to curve an html element inwards? (So it looks like the new panoramic samsung TV, for example).

Just to be clear - I do not want to create a curved plane and use an image as a texture. It's a dynamic div - a video player, with an interactive skin to be exact, and I want to curved inward)

THANKS! :)

2

2 Answers

Not sure if there is a direct way , but here is a hack with :before and :after pseudo element to achieve an inward curve.

#video-player { width: 200px; height: 150px; background: #ccc; position: relative; } #video-player:after, #video-player:before { position: absolute; height: 150px; width: 400px; border-radius: 50%; background: white; z-index: 1; content: " "; } #video-player:after { top: 120px; left: -100px; } #video-player:before { top: -120px; left: -100px; }
<div> </div>
2

TL;DR: No, you can not curve an HTML element as of 2016/2

You said you didn't want to do this but, you could try rendering a curved plane video and your UI curved with it in WebGL (or three.js) all manually implemented (not using HTML elements). There's an example of video in three.js here

The biggest obstacle will be that currently getting video into WebGL is somewhat heavy. Video larger than a certain size might run too slow.

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.