Geralmente, as áreas de texto são retangulares ou quadradas, assim:

Mas eu quero uma área de texto com formato personalizado, como este, por exemplo:

Como isso é possível?

Introdução

Primeiro, existem muitas soluções propostas em outros posts. Eu acho que este é atualmente (em 2013) o que pode ser compatível com o maior número de navegadores, porque não precisa de nenhuma propriedade CSS3. No entanto, o método não funcionará em navegadores que não suportam contentdeditable , tenha cuidado.

Solução com uma div contenteditable

Conforme proposto pelo @Getz , você pode usar uma div com contenteditablee depois modelá- la com alguma div. Aqui está um exemplo, com dois blocos que flutuam no canto superior esquerdo e no canto superior direito da div principal:

Como você pode ver, você precisa brincar um pouco com as bordas se quiser o mesmo resultado que solicitou em sua postagem. A div principal tem a borda azul em todos os lados. Em seguida, os blocos vermelhos devem ser colados para ocultar as bordas superiores da div principal e você deve aplicar bordas a elas somente em lados específicos ( inferior e esquerda para o bloco direito, inferior e direita para a esquerda).

Depois disso, você pode obter o conteúdo via Javascript, quando o botão " Enviar " é acionado, por exemplo. E acho que você também pode lidar com o resto do CSS ( font-size, color, etc.) :)

Exemplo de código completo

.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>

Num futuro próximo, podemos usar os chamados css-shapespara conseguir isso. Uma div com o contenteditableatributo definido como truecombinado css-shapespode transformar uma área de texto em qualquer tipo de forma.

Atualmente, o Chrome Canary já suporta css-shapes . Um exemplo possível com css-shapes é:

Aqui eles estão usando uma forma de polígono para definir o fluxo de texto. Deve ser possível criar dois polígonos para corresponder à forma desejada para a área de texto.

Mais informações css-shapesforam escritas em: http://sarasoueidan.com/blog/css-shapes/

Para ativar o CSS-shapes no Chrome Canary:

1. Copie e cole chrome: // flags / # enable-experimental-web-platform-features na barra de endereços e pressione enter.
2. Clique no link 'Ativar' nessa seção.

3. Clique no botão 'Reiniciar agora' na parte inferior da janela do navegador.

   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>

Polígono criado com: http://betravis.github.io/shape-tools/polygon-drawing/

Resultado

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

Talvez seja possível com o Conteúdo Editável ?

Não é uma área de texto, mas se você conseguir criar uma div com essa forma, ela poderá funcionar.

Eu acho que não é possível com apenas textarea ...

Um pequeno exemplo: http://jsfiddle.net/qgfP6/5/

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

Você pode trabalhar com uma div editável por conteúdo, com duas divs de cantos:

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

Você também pode fazer isso com regiões CSS

Com Regiões, você pode usar propriedades CSS para fluir o conteúdo para contêineres com estilo existentes, especificando qualquer ordem de contêiner que você escolher, independentemente de sua posição na página.

(Plataforma Web)

[Atualmente suportado no WebKit Nightly, Safari 6.1+ e iOS7 e já utilizável no chrome e opera depois de ativar o sinalizador: enable-experimental-web-platform-features - caniuse , Web Platform ]

FIDDLE

Assim, você pode criar a forma da área de texto fluindo o texto por 2 regiões e editá-lo adicionando conteúdo editável ao conteúdo.

Marcação

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

CSS (relevante)

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

O resultado:

Para obter mais informações sobre regiões - aqui está um bom artigo: Regiões CSS3: layout de página avançado com HTML e CSS3

Uma longa linha de texto na caixa deixará o cursor passar pelas bordas do meio e não consigo consertar isso.

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

Isso não é possível senhor! Uma área de texto geralmente é uma caixa retangular ou quadrada, onde você pode digitar.

No entanto, para criar algo assim, você pode usar 2 áreas de texto e, em seguida, fornecer a elas uma largura e altura especificadas. Caso contrário, eu não acho que isso vai acontecer!

O segundo método seria criar um elemento editável.

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

O código é:

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

Com isso, você pode tornar qualquer elemento editável! Você pode dar dimensões a ele, e vai funcionar! Você o obterá como uma área de texto.

Referência: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

Se você combinar formas CSS com contenteditableisso, isso poderá ser feito nos navegadores do kit da web.

Primeiro você precisa habilitar o sinalizador: enable-experimental-web-platform-features

Em seguida, reinicie o navegador do webkit e verifique este FIDDLE !

Este método também funcionará para formas fora do padrão.

Marcação

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

Então, como diabos eu consegui essa forma de polígono?

Vá para este site e crie seu próprio formato personalizado!

Notas sobre como ativar a sinalização: ( daqui )

Para habilitar formas, regiões e modos de mesclagem:

Copie e cole chrome: // flags / # enable-experimental-web-platform-features na barra de endereços e pressione enter. Clique no link 'Ativar' nessa seção. Clique no botão 'Reiniciar agora' na parte inferior da janela do navegador.

Você pode usar a ferramenta de web designer do Google para criar formas complexas usando HTML5-canvas and CSS.

Além disso, você terá outras ferramentas, como ferramentas de digitação, para inserir textos nessas formas.

Como o arquivo de saída contém muito código, fornece uma amostra de uma demonstração de exemplo criada usando a ferramenta Google Web Designer

DEMO FIDDLE >>

Se, por qualquer motivo, você realmente precisar oferecer suporte a navegadores que não possuem contenteditable, provavelmente poderá fazer a mesma coisa em JavaScript usando eventos, embora essa seja uma solução muito confusa.

Pseudo-código:

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