Unusual shape of a textarea?

Question

Usually textareas are rectangular or square, like this:

But I want a custom-shaped

Answer 1

You could also do this with CSS Regions

With Regions, you can use CSS properties to flow content into existing styled containers, specifying any container order you choose, regardless of their position on the page.

(Web Platform)

[Currently supported in WebKit Nightly, Safari 6.1+ and iOS7 and already usable in chrome and opera after enabling the flag: enable-experimental-web-platform-features - caniuse, Web Platform ]

FIDDLE

So you could make that textarea shape by flowing the text through 2 regions, and edit it by adding contenteditable on the content.

Markup

text here

(Relevant) CSS

#content {
     -ms-flow-into: article;
    -webkit-flow-into: article;
}

.region {
    -ms-flow-from: article;
    -webkit-flow-from: article;
    box-sizing: border-box;
    position: absolute;
    width: 200px;
    height: 200px;
    padding: 0 1px;
    margin: auto;
    left:0;right:0;
    border: 2px solid lightBlue;
}

#box-a {
    top: 10px;
    background: #fff;
    z-index: 1;
    border-bottom: none;
}

#box-b {
    top: 210px;
    width: 400px;
    overflow: auto;
    margin-top: -2px;
}

The result:

For more info about regions - here's a good aricle: CSS3 regions: Rich page layout with HTML and CSS3