Unusual shape of a textarea?

Question

Introduction

First, there are many solutions, proposed in other posts. I think this one is currently (in 2013) the one which can be compatible with the largest number of browsers, because it doesn't need any CSS3 properties. However, the method will not work on browsers which doesn't support contentdeditable, be careful.

Solution with a div contenteditable

As proposed by @Getz, you can use a div with contenteditable and then shape it with some div on it. Here is an example, with two blocks which float at the upper left and the upper right of the main div:

As you can see, you have to play a little with the borders if you want the same result as you requested in your post. The main div has the blue border on every side. Next, red blocks has to be sticked to hide top borders of the main div, and you need to apply border to them only on particular sides (bottom and left for the right block, bottom and right for the left).

After that, you can get the content via Javascript, when the "Submit" button is triggered for example. And I think you can also handle the rest of the CSS (font-size, color, etc.) :)

Full code sample

.block_left {
  background-color: red;
  height: 70px;
  width: 100px;
  float: left;
  border-right: 2px solid blue;
  border-bottom: 2px solid blue;
}

.block_right {
  background-color: red;
  height: 70px;
  width: 100px;
  float: right;
  border-left: 2px solid blue;
  border-bottom: 2px solid blue;
}

.div2 {
  background-color: white;
  font-size: 1.5em;
  border: 2px solid blue;
}

.parent {
  height: 300px;
  width: 500px;
}

<div class="parent">
  <div class="block_left"></div>
  <div class="block_right"></div>
  <div class="div2" contenteditable="true">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut..."
  </div>
</div>

In the near future we can use so called css-shapes to achieve this. A div with the contenteditable attribute set to true combined with css-shapes can make a text area any kind of shape.

Currently Chrome Canary already supports css-shapes. An example what is possible with css-shapes is:

Here they are using a polygon shape to define the text-flow. It should be possible to create two polygons to match the shape you want for your textarea.

More information about css-shapes has been written at: http://sarasoueidan.com/blog/css-shapes/

To enable css-shapes in Chrome Canary:

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

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

   from: http://html.adobe.com/webplatform/enable/

.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 with: http://betravis.github.io/shape-tools/polygon-drawing/

Result

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

Maybe it's possible with Content Editable ?

It's not a textarea, but if you succeed to create a div with this shape, it could work.

I think it's not possible with just textarea...

A little example: http://jsfiddle.net/qgfP6/5/

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

You could work with a contenteditable div, with two corners 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>

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

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

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

A long line of text in the box will drop the cursor down past the middle edges and I can't seem to fix that.

**[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 A B Cs</span>
  </div>
</div>

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