CODEWITHSUNDEEP
htmlcsstextareacustomization
Ariyan
Ariyan

Reputation: 15168

Custom Shaped Textarea in HTML/CSS

Is it possible to have custom shaped text areas in HTML/CSS (Textarea that has more than 4 edges)? How?
Something like this:
enter image description here
OR if possible;something more complex like this:
enter image description here

Upvotes: 5

Views: 3497

Answers (4)

Dave
Dave

Reputation: 1429

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.

enter image description here

Upvotes: 1

Maurice Svay
Maurice Svay

Reputation: 361

I might become possible in the future with CSS3 Regions and Wrap Shapes (proposed by Adobe): http://www.adobe.com/devnet/html5/articles/css3-regions.html

Upvotes: 0

keithwyland
keithwyland

Reputation: 2998

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/

Upvotes: 2

Kit Barnes
Kit Barnes

Reputation: 785

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

Upvotes: 0

Related Questions