Looking forward, we have the potential to utilize "css-shapes" in order to accomplish this task. By utilizing a div with the "contenteditable" attribute set to "true" along with "css-shapes," it becomes possible to shape a text area in any desired form.

At present, Chrome Canary has already extended its support for "css-shapes." An instance of the possibilities with css-shapes can be seen here:

The usage of a polygon shape is demonstrated to delineate the text-flow. It should be feasible to create two polygons that match the shape you aim for your textarea.

For further insights on "css-shapes," additional information can be found at:

To activate css-shapes in Chrome Canary:

1. Copy and paste chrome://flags/#enable-experimental-web-platform-features into the address bar, then hit enter.
2. Click the 'Enable' link within that section.

3. Press the 'Relaunch Now' button located at the bottom of the browser window.

   from:

.container {
  overflow: hidden;
  shape-inside: polygon(200.67px 198.00px, 35.33px 198.47px, 34.67px 362.47px, 537.00px 362.74px, 535.67px 196.87px, 388.33px 197.00px, 386.67px 53.53px, 201.33px 53.53px);
  font-size: 0.8em;
}
/** for red border **/

.container:before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 190px;
  height: 190px;
  background-color: white;
  border-right: 1px solid red;
  border-bottom: 1px solid red;
}
.container:after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 190px;
  height: 190px;
  background-color: white;
  border-left: 1px solid red;
  border-bottom: 1px solid red;
}

<div class="container" contenteditable="true">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis diam lacus, id lacinia quam interdum quis. Ut vitae dignissim lorem, nec lobortis turpis. Fusce non fringilla nulla, eu blandit urna. Nulla facilisi. Nunc tristique, mauris vitae
  tincidunt egestas, eros metus dapibus sapien, quis tincidunt sem dui ac purus. Morbi lobortis, quam sit amet consequat aliquam, elit mi rutrum erat, id tempus turpis turpis et sem. Vivamus tempor mollis porttitor. Sed elementum nisl sit amet sapien
  auctor imperdiet. Sed suscipit convallis nisi, in dignissim risus placerat suscipit. Sed vel lorem eu massa vulputate pretium. Nulla eget dolor sed elit gravida condimentum non vel lorem. Vivamus pretium, augue sed aliquet ultricies, neque nibh porttitor
  libero, a tristique elit mi eu nibh. Vestibulum erat arcu, condimentum eleifend adipiscing ut, euismod eu libero. In pharetra iaculis lorem, at consectetur nisi faucibus eu.

</div>

Polygon created using:

Outcome

http://jsfiddle.net/A8cPj/1/

Have you considered using Content Editable? It might be the solution you're looking for.

Even though it's not a textarea, creating a div with similar functionality could potentially achieve the desired outcome.

In my opinion, using just a textarea may not be sufficient...

Here's a small example to demonstrate: http://jsfiddle.net/qgfP6/5/

<div contenteditable="true">
</div>

To create a unique layout, consider using a contenteditable div with two corner divs:

<div style="border:1px blue solid ; width: 200px; height: 200px;" contenteditable="true">
  <div style="float:left; width:50px; height: 50px; border: 1px solid blue" contenteditable="false"></div>
  <div style="float:right; width:50px; height: 50px;  border: 1px solid blue" contenteditable="false"></div>
  hello world, hello worldsdf asdf asdf sdf asdf asdf
</div>

Another way to achieve this is by utilizing CSS Regions

CSS Regions allow you to flow content into styled containers, specifying the order of containers regardless of their position on the page.

(Web Platform)

[Supported in WebKit Nightly, Safari 6.1+, iOS7, Chrome and Opera with experimental features enabled - caniuse, Web Platform ]

FIDDLE

You can create a textarea shape by flowing text through 2 regions and make it editable using contenteditable attribute.

Markup

<div id="box-a" class="region"></div>
<div id="box-b" class="region"></div>
<div id="content" contenteditable>text here</div>

(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 end result:

To learn more about regions, check out this informative article: CSS3 regions: Rich page layout with HTML and CSS3

A lengthy text inside the box will cause the cursor to drop below the middle edges and I'm struggling to correct this issue.

**[Fiddle Diddle][1]**

    #wrap {
        overflow: hidden;
    }
    #inner {
        height: 350px;
        width: 500px;
        border: 1px solid blue;
    }
    #textContent {
        word-wrap: break-word;
        word-break: break-all;
        white-space: pre-line;
    }
    #left, #right {
        height: 50%;
        width: 25%;
        margin-top: -1px;
        padding: 0;
        border: 1px solid blue;
        border-top-color: white;
        margin-bottom: 5px;
    }
    #right {
        margin-left: 5px;
        float: right;
        margin-right: -1px;
        border-right-color: white;
    }
    #left {
        margin-right: 5px;
        float: left;
        margin-left: -1px;
        border-left-color: white;
    }

<div id="wrap">
  <div id="inner">
     <div id="left"></div>
     <div id="right"></div>
     <span id="textContent" contenteditable>The X Y Zs</span>
  </div>
</div>

[1]: http://jsfiddle.net/yKSZV/

Sorry sire, it seems that creating a textarea in a different shape than the standard rectangle is not possible.

One workaround could be using 2 textareas with specified width and height. Alternatively, you can use an editable element like this:

http://jsfiddle.net/afzaal_ahmad_zeeshan/at2ke/

The code for an editable element:

<div contenteditable="true">
   This text can be edited by the user.
</div>

By using this method, you can make any element editable and give it dimensions as needed, similar to how a textarea works.

For more information, refer to: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

By integrating CSS shapes with the contenteditable attribute, you can achieve this on webkit browsers.

To start, you need to activate the flag: enable-experimental-web-platform-features

After that, restart your webkit browser and take a look at this FIDDLE!

This approach is effective even for non-standard shapes.

Markup

 <div class="shape" contenteditable="true">
    <p>
     Text here
    </p>
  </div>

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;
}

Wondering how I got that polygon shape?

Visit this website and create your very own custom shape!

Some tips on activating 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.

If you want to create intricate shapes using HTML5-canvas and CSS, consider utilizing the powerful Google web designer tool.

In addition to shape creation, you'll also have access to typing tools for adding text within the shapes.

To showcase the capabilities of the tool, check out a sample demo created with the Google Web Designer tool:

FIDDLE DEMO>>

In situations where you find yourself needing to cater to browsers that lack support for the contenteditable attribute, one possible solution could involve using JavaScript and events, although this approach can be quite messy.

Here is a rough outline of how this could work in pseudocode:

isFocused = false;
when user clicks on the div
{
    isFocused = true;
}
when user clicks outside the div
{
    isFocused = false;
}
when user presses a key
{
    if (isFocused)
    {
        append character corresponding to the key pressed to div.innerHTML;
    }
}