Unusual shape of a textarea?

contenteditable — An alternate approach

For shapes of higher complexity, or if you desire compatibility with browsers not supporting clip-path, resort to <div> with contenteditable attribute. Layered elements, cunningly organized and styled, can create editable areas which look far from the mundane.

Decorative blocks are handy tools for creating illusions, making your ordinary textarea morph into an extraordinary one. Here's how:

<div class="custom-shape-wrapper">
    <div contenteditable="true" class="editable-content">Your text here...</div>
    <!-- 007! Your mission is to create an invisibility cloak around the textarea. The secret agents? 🕴️ Decorative blocks! -->
    <div class="decorative-block top"></div>
    <div class="decorative-block right"></div>
    <div class="decorative-block bottom"></div>
    <div class="decorative-block left"></div>
</div>


Here, with CSS kneading the content and blocks into a unique shape and JavaScript ensuring form submissions work seamlessly, your textarea becomes a chameleon!

Design like Michelangelo: CSS regions and polygons

Ever wanted to create a text flow in the shape of the Mona Lisa while maintaining browser compatibility? Though currently experimental, CSS Regions could be your game changer!

For creating complex layouts, CSS polygon() is your BFF. Do note, some browsers may require you to switch from 'Jane Doe' to 'Indiana Jones' mode with experimental web platform features:

.custom-shape-container {
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  /* I'm more flexible than a gymnast. Watch me do the splits! */
}


Prioritizing user experience

While creating zany shapes, don't lose sight of user experience. Ensure the text wrapping and cursor behavior make usability seem as breezy as a walk in the park!

Battle of browsers: Designing for compatibility

Your users have different browsers as their weapon of choice. Sweat a few bullets to ensure your out-of-the-box textareas perform stunningly across different browsers. Perhaps, have a plan B in place: a traditional rectangular textarea for your old-school users who are not on board with contenteditable or CSS Regions.

Dirty your hands with JSFiddle and Adobe

Experience the magic of learning-by-doing with JSFiddle links, or deep-dive into Adobe’s documentation to unlock the mystique of CSS Regions.

Real-world hints

To learn the ropes, turn to html5demos.com which has some interactive examples of contenteditable or Sara Soueidan’s blog for comprehensive guidance on CSS shapes.