October 21, 2024
Chicago 12, Melborne City, USA
CSS

CSS: wrap text in existing html site around polygon (OBS browser)


I want to implement an existing chat URL (https://chat.restream.io/embed?token=bebb117e-81d4-4394-9901-0c644ac2ee51) into a stream via OBS Studio’s internal browser. Instead of being rectangular, I want the text to wrap around a polygonal shape, basically a triangle in the bottom left corner.

As you can see in the source code, there are a lot of classes that could be used (like jss1, jss3, jss5 and chat-messages).

Playing around with clip-path and shape-outside, I somehow cannot get it to work properly.

The actual polygon will be a bit more complicated than these triangles, which should not matter for coming up with a solution. Right now, it just floats under.

part to wrap around

I tried different shapes and paths in different classes, befores and afters, but it either cuts off the text before or after instead of making it wrap around the shape:

clip-path: polygon(0 0, 100% 0, 100% 100%);
shape-outside: polygon(0 0, 100% 100%, 0 100%);



You need to sign in to view this answers

Leave feedback about this

  • Quality
  • Price
  • Service

PROS

+
Add Field

CONS

+
Add Field
Choose Image
Choose Video