Is there a way to curve an element?

问题

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! :)

回答1:

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 id="video-player">

</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.

来源：https://stackoverflow.com/questions/35358684/is-there-a-way-to-curve-an-element