В ближайшем будущем мы можем использовать так называемый css-shapes, чтобы достичь этого. Div с атрибутом contenteditable, установленным в true в сочетании с css-shapes, может сделать текстовую область любой формой.

В настоящее время Chrome Canary уже поддерживает css-shapes. Пример, который возможен с помощью css-фигур:

Здесь они используют форму многоугольника для определения потока текста. Должно быть возможно создать два полигона, чтобы соответствовать форме, которую вы хотите для своего текстового поля.

Дополнительная информация о css-shapes написана по адресу: http://sarasoueidan.com/blog/css-shapes/

Чтобы включить css-формы в Chrome Canary:

• Скопировать и вставить chrome://flags/# enable-experimental-web-platform-features в адресную строку, затем нажмите клавишу ввода.
• Нажмите ссылку "Включить" в пределах этого раздел.

• Нажмите кнопку "Повторить сейчас" внизу браузера.

  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>

Многоугольник, созданный с помощью http://betravis.github.io/shape-tools/polygon-drawing/

Результат

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

Возможно ли это с помощью Content Editable?

Это не текстовое поле, но если вам удастся создать div с этой формой, он может работать.

Я думаю, что это невозможно с помощью только textarea...

Маленький пример: http://jsfiddle.net/qgfP6/5/

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

Вы можете работать с contenteditable div, с двумя углами 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>

Вы также можете сделать это с помощью CSS-регионы

С помощью регионов вы можете использовать свойства CSS для потока содержимого в существующие с указанием контейнера, который вы выберете, независимо от их положения на странице.

(веб-платформа)

[В настоящее время поддерживается в WebKit Nightly, Safari 6.1+ и iOS7 и уже используется в Chrome и Opera после включения флага: enable-experimental-web-platform-features - caniuse, Веб-платформа]

FIDDLE

Итак, вы можете сделать эту форму textarea, протекая текст через 2 области и отредактировать ее, добавив контент в контент.

Разметка

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

(Релевантно) 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;
}

Результат:

Для получения дополнительной информации о регионах - здесь хорошая статья: Области CSS3: богатый макет страницы с HTML и CSS3

Длинная строка текста в поле выводит курсор вниз по средним краям, и я не могу это исправить.

**[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/

Это не возможно сир! Текстовое поле обычно представляет собой прямоугольное или квадратное поле, в которое вы можете ввести.

Однако, чтобы сделать что-то подобное, вы можете использовать 2 textarea, а затем дать им указанную ширину и высоту. В противном случае я не думаю, что это произойдет!

Второй метод - создать редактируемый элемент.

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

Код:

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

Используя это, вы можете сделать любой элемент редактируемым! Вы можете дать измерения, и это сработает! Вы получите это как текстовое поле.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

Вы можете использовать инструмент веб-дизайнера Google для создания сложных форм с помощью HTML5-canvas and CSS.

Более того, вы получите другие инструменты, такие как ввод инструментов для ввода текстов внутри этих фигур.

Поскольку выходной файл содержит много кода, предоставляя скрипту демонстрационной демонстрации, созданной с помощью Инструмента Google Web Designer

FIDDLE DEMO →

Если вы объедините CSS-формы с contenteditable, это можно сделать в браузерах webkit.

Сначала вам нужно включить флаг: enable-experimental-web-platform-features

Затем перезагрузите браузер веб-браузера, а затем откройте FIDDLE!

Этот метод будет работать и для нестандартных форм.

Разметка

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

Итак, как же я получил форму полигона?

Перейдите на этот сайт и создайте собственную форму!

Заметки о включении флага: (от здесь)

Чтобы включить режим Shape, Regions и Blend:

Скопировать и вставить chrome://flags/# enable-experimental-web-platform-features в адресную строку, затем нажмите клавишу ввода. Нажмите ссылку "Включить" в пределах этого раздел. Нажмите кнопку "Повторить сейчас" внизу браузера. окно.

Если по какой-то причине вам действительно нужно поддерживать браузеры, у которых нет contenteditable, вы, вероятно, могли бы сделать то же самое в JavaScript, используя события, хотя это очень грязное решение.

псевдокод:

focused=false;
when user clicks the div
    {
    focused=true;
    }
when user clicks outside the div
    {
    focused=false;
    }
when user presses a key
    {
    if (focused)
    {
    add character of key to div.innerHTML;
    }
    }