Di solito le textareas sono rettangolari o quadrate, in questo modo:

Ma voglio un'area di testo personalizzata, come questa, ad esempio:

Com'è possibile?

introduzione

Innanzitutto, ci sono molte soluzioni, proposte in altri post. Penso che questo sia attualmente (nel 2013) quello che può essere compatibile con il maggior numero di browser, perché non ha bisogno di alcuna proprietà CSS3. Tuttavia, il metodo non funzionerà su browser che non supportano contentdeditable , fai attenzione.

Soluzione con un div contenteditable

Come proposto da @Getz , puoi usare un div con contenteditablee quindi modellarlo con qualche div su di esso. Ecco un esempio, con due blocchi che galleggiano in alto a sinistra e in alto a destra del div principale:

Come puoi vedere, devi giocare un po 'con i bordi se vuoi lo stesso risultato che hai richiesto nel tuo post. Il div principale ha il bordo blu su ogni lato. Successivamente, i blocchi rossi devono essere incollati per nascondere i bordi superiori del div principale e devi applicare il bordo solo su lati particolari (in basso e a sinistra per il blocco destro, basso e a destra per il sinistro).

Successivamente, puoi ottenere il contenuto tramite Javascript, quando il " viene attivato il pulsante Invia ". E penso che tu possa anche gestire il resto del CSS ( font-size,color , ecc) :)

Esempio di codice 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>

Nel prossimo futuro possiamo usare il cosiddetto css-shapesper raggiungere questo obiettivo. Un div con l' contenteditableattributo impostato su truecombinato con css-shapespuò rendere un'area di testo qualsiasi tipo di forma.

Attualmente Chrome Canary supporta già css-shapes. Un esempio di ciò che è possibile con css-shapes è:

Qui stanno usando una forma poligonale per definire il flusso di testo. Dovrebbe essere possibile creare due poligoni per abbinare la forma desiderata per l'area di testo.

Ulteriori informazioni su css-shapessono state scritte su: http://sarasoueidan.com/blog/css-shapes/

Per abilitare le forme CSS in Chrome Canary:

1. Copia e incolla chrome: // flags / # enable-experimental-web-platform-features nella barra degli indirizzi, quindi premi invio.
2. Fai clic sul link "Abilita" all'interno di quella sezione.

3. Fai clic sul pulsante "Riavvia ora" nella parte inferiore della finestra del browser.

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

Poligono creato con: http://betravis.github.io/shape-tools/polygon-drawing/

Risultato

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

Forse è possibile con i contenuti modificabili ?

Non è una textarea, ma se riesci a creare un div con questa forma, potrebbe funzionare.

Penso che non sia possibile solo con textarea ...

Un piccolo esempio: http://jsfiddle.net/qgfP6/5/

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

Puoi lavorare con un div contenteditable, con due div di angoli:

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

Puoi farlo anche con le regioni CSS

Con le regioni, è possibile utilizzare le proprietà CSS per trasferire il contenuto nei contenitori con stile esistenti, specificando qualsiasi ordine di contenitore scelto, indipendentemente dalla loro posizione sulla pagina.

(Piattaforma Web)

[Attualmente supportato in WebKit Nightly, Safari 6.1+ e iOS7 e già utilizzabile in Chrome e Opera dopo aver abilitato il flag: enable-sperimental-web-platform-features - caniuse , Web Platform ]

VIOLINO

Quindi potresti creare quella textarea modellando il testo attraverso 2 regioni e modificandolo aggiungendo contenteditable al contenuto.

markup

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

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

Il risultato:

Per maggiori informazioni sulle regioni, ecco un buon articolo: Regioni CSS3: layout di pagina ricco con HTML e CSS3

Una lunga riga di testo nella casella farà cadere il cursore oltre i bordi centrali e non riesco a sistemarlo.

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

Non è possibile padre! Un'area di testo è generalmente una casella quadrata o quadrata, in cui è possibile digitare.

Tuttavia, per fare qualcosa del genere puoi usare 2 textarea e quindi dare loro una larghezza e un'altezza specificate. Altrimenti non penso che succederà!

Il secondo metodo sarebbe quello di creare un elemento modificabile.

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

Il codice è:

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

Usando questo, puoi rendere qualsiasi elemento modificabile! Puoi dargli dimensioni e funzionerà! Lo otterrai proprio come textarea.

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

Se si combinano forme CSS con contenteditablequesto può essere fatto nei browser webkit.

Per prima cosa devi abilitare il flag: enable-experimental-web-platform-features

Quindi riavvia il tuo browser webkit e quindi controlla questo FIDDLE !

Questo metodo funzionerà anche per forme non standard.

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

Quindi come diavolo ho ottenuto quella forma poligonale?

Vai a questo sito e crea la tua forma personalizzata!

Note sull'abilitazione della bandiera: (da qui )

Per abilitare forme, regioni e metodi di fusione:

Copia e incolla chrome: // flags / # enable-experimental-web-platform-features nella barra degli indirizzi, quindi premi Invio. Fai clic sul link "Abilita" all'interno di quella sezione. Fai clic sul pulsante "Riavvia ora" nella parte inferiore della finestra del browser.

Puoi utilizzare lo strumento web designer di Google per creare forme complesse utilizzando HTML5-canvas and CSS.

Più oltre otterrai altri strumenti come gli strumenti di digitazione per inserire testi all'interno di queste forme.

Poiché il file di output contiene molto codice, fornisce un violino di una demo di esempio creata utilizzando lo strumento Google Web Designer

DEMO FIDDLE >>

Se, per qualsiasi motivo, hai davvero bisogno di supportare i browser che non hanno contenteditable , probabilmente potresti fare la stessa cosa in JavaScript, usando gli eventi, anche se questa è una soluzione molto disordinata.

pseudocodice:

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