Custom Shaped Textarea in HTML/CSS

Question

Is it possible to have custom shaped text areas in HTML/CSS (Textarea that has more than 4 edges)? How?
Something like this:

OR if possible;something more complex like this:

Answer 1

I shudder in the act of giving this link, because it's super un-semantic. You end up with tons of divs whose only purpose is to create "wrapping points" for the text.

But, FWIW, here's how you could do what you're asking. I would personally only do something like this for the fun of it or maybe on my own site, but probably not any other production public site.

http://www.csstextwrap.com/

Answer 2

This is a super old question but still shows up high in google, so here's the answer you're probably looking for today: shape-outside . (If you don't care about IE or edge)

Sadly there is no shape-inside for the hexagon example but it can be achieved with a shape-outside on both sides as described later in the linked article.

Answer 3

For the top result, if you have a the following html you should get something like what you are looking for

<div style="width:'textbox-width';">
    <img  style="float: right" />
    <span>text goes here</span>
</div>

where the image is a blank spacer of the size you require, then the text in the span should wrap around the image and appear as above.

The hexagon might be possible using the same method with triangluar images

Answer 4

将来我可能会使用CSS3区域和包装形状（由Adobe提出）： http : //www.adobe.com/devnet/html5/articles/css3-regions.html