Warping text inside an area


I’ve taken to redoing my stream’s layout and with it comes a change in how my chat area is looking. The area is now a circle, and I’d like the text to stay within this circle. I’ve tried using a clipping path to make this happen, however this only hides the parts outside the area.

I checked around the web and I only found one promising guide on this, but that required me to have access to the html elements. Spesifically to create <div class="left-shape"> and <div class="right-shape"> (http://www.html5rocks.com/en/tutorials/shapes/getting-started/)

This is the shape I want the chat area to have: http://i.imgur.com/uekyqAU.png, and it’s a .png version of my .svg file.

Thank you for your time,

I realize I never actually posed a question: does anyone know an alternative way to do this?

As was replied to you via email, you can use a border-radius to give the chat div a circular appearance.

#chat_box {
    border-radius: 500px;

You may need to add a text-indent depending on how large the radius is.

I attempted to use border-radius, however it didn’t give the desired look.

Example of look

Shows how I’ve been looking to make it.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.