Por lo general, las áreas de texto son rectangulares o cuadradas, así:

Pero quiero un área de texto con forma personalizada, como esta, por ejemplo:

¿Cómo es esto posible?

Introducción

Primero, hay muchas soluciones, propuestas en otras publicaciones. Creo que este es actualmente (en 2013) el que puede ser compatible con la mayor cantidad de navegadores, ya que no necesita ninguna propiedad CSS3. Sin embargo, el método no funcionará en los navegadores que no son compatibles contentdeditable , tenga cuidado.

Solución con un div contenteditable

Según lo propuesto por @Getz , puede usar un div con contenteditabley luego darle forma con algo de div. Aquí hay un ejemplo, con dos bloques que flotan en la esquina superior izquierda y en la esquina superior derecha del div principal:

Como puede ver, debe jugar un poco con los bordes si desea obtener el mismo resultado que solicitó en su publicación. El div principal tiene el borde azul en cada lado. A continuación, los bloques rojos deben pegarse para ocultar los bordes superiores del div principal, y debe aplicar un borde a ellos solo en lados particulares ( abajo e izquierda para el bloque derecho, abajo y derecha para el izquierdo).

Después de eso, puede obtener el contenido a través de Javascript, cuando se activa el botón " Enviar ", por ejemplo. Y creo que también se puede manejar el resto de la CSS ( font-size, color, etc.) :)

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

En un futuro cercano podemos usar los llamados css-shapespara lograr esto. Un div con el contenteditableatributo establecido en truecombinado con css-shapespuede hacer que un área de texto tenga cualquier tipo de forma.

Actualmente Chrome Canary ya es compatible css-shapes . Un ejemplo de lo que es posible con css-shapes es:

Aquí están usando una forma de polígono para definir el flujo de texto. Debería ser posible crear dos polígonos para que coincidan con la forma que desea para su área de texto.

Se css-shapesha escrito más información sobre : http://sarasoueidan.com/blog/css-shapes/

Para habilitar formas CSS en Chrome Canary:

1. Copie y pegue chrome: // flags / # enable-experimental-web-platform-features en la barra de direcciones, luego presione Intro.
2. Haga clic en el enlace 'Habilitar' dentro de esa sección.

3. Haga clic en el botón 'Reiniciar ahora' en la parte inferior de la ventana del navegador.

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

Resultado

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

¿Quizás es posible con Content Editable ?

No es un área de texto, pero si logras crear un div con esta forma, podría funcionar.

Creo que no es posible con solo textarea ...

Un pequeño ejemplo: http://jsfiddle.net/qgfP6/5/

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

Podría trabajar con un div contenteditable, con dos divs de esquinas:

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

También puede hacer esto con Regiones CSS

Con Regions, puede usar las propiedades CSS para transmitir contenido a los contenedores con estilo existentes, especificando cualquier orden de contenedor que elija, independientemente de su posición en la página.

(Plataforma web)

[Actualmente compatible con WebKit Nightly, Safari 6.1+ y iOS7 y ya se puede usar en Chrome y Opera después de habilitar la bandera: enable-experimental-web-platform-features - caniuse , Web Platform ]

VIOLÍN

Por lo tanto, puede crear esa forma de área de texto haciendo fluir el texto a través de 2 regiones y editarla agregando contenido contento en el contenido.

Margen

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

(Relevante) 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;
}

El resultado:

Para obtener más información sobre las regiones, aquí hay un buen artículo: regiones CSS3: diseño de página enriquecido con HTML y CSS3

Una larga línea de texto en el cuadro dejará caer el cursor más allá de los bordes medios y parece que no puedo solucionarlo.

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

¡Eso no es posible señor! Un área de texto es generalmente un cuadro rectángulo o cuadrado, donde puede escribir.

Sin embargo, para hacer algo así, puede usar 2 textarea's y luego darles un ancho y una altura específicos. De lo contrario, ¡no creo que vaya a suceder!

El segundo método sería hacer un elemento editable.

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

El codigo es:

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

¡Usando esto, puedes hacer que cualquier elemento sea editable! ¡Puedes darle dimensiones y funcionará! Lo obtendrás solo como un área de texto.

Referencia: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

Si combina formas CSS con contenteditableesto, puede hacerlo en los navegadores webkit.

Primero debe habilitar la bandera: enable-experimental-web-platform-features

Luego reinicie su navegador webkit y luego verifique este FIDDLE .

Este método también funcionará para formas no estándar.

Margen

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

Entonces, ¿cómo demonios obtuve esa forma de polígono?

¡Ve a este sitio y crea tu propia forma personalizada!

Notas sobre cómo habilitar la bandera: (desde aquí )

Para habilitar formas, regiones y modos de fusión:

Copie y pegue chrome: // flags / # enable-experimental-web-platform-features en la barra de direcciones, luego presione Intro. Haga clic en el enlace 'Habilitar' dentro de esa sección. Haga clic en el botón 'Reiniciar ahora' en la parte inferior de la ventana del navegador.

Puede usar la herramienta de diseño web de Google para crear formas complejas usando HTML5-canvas and CSS.

Además, obtendrá otras herramientas como herramientas de escritura para ingresar textos dentro de estas formas.

Como el archivo de salida contiene mucho código, proporciona un violín de una demostración de muestra creada con la herramienta Google Web Designer

FIDDLE DEMO >>

Si, por alguna razón, realmente necesita admitir navegadores que no lo tienen contenteditable, probablemente podría hacer lo mismo en JavaScript, utilizando eventos, aunque esta es una solución muy desordenada.

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