Unusual shape of a textarea?

Question

Usually textareas are rectangular or square, like this:

But I want a custom-shaped

Answer 1

If you combine CSS shapes with contenteditable this can be done in webkit browsers.

First you have to enable the flag: enable-experimental-web-platform-features

Then restart your webkit browser and then check this FIDDLE out !

This method will work for non-standard shapes as well.

Markup

 

    

     Text here
    
  

CSS

.shape{
  -webkit-shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px);
  shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px);
  width: 400px;
  height: 400px;
  text-align: justify;
  margin: 0 auto;
}

So how on earth did I get that polygon shape?

Go to this site and make your own custom shape!

Notes about enabling the flag: (from here)

To enable Shapes, Regions, and Blend Modes:

Copy and paste chrome://flags/#enable-experimental-web-platform-features into the address bar, then press enter. Click the 'Enable' link within that section. Click the 'Relaunch Now' button at the bottom of the browser window.