Habituellement, les zones de texte sont rectangulaires ou carrées, comme ceci:

Mais je veux une zone de texte personnalisée, comme celle-ci, par exemple:

Comment est-ce possible?

introduction

Premièrement, il existe de nombreuses solutions, proposées dans d'autres articles. Je pense que celui-ci est actuellement (en 2013) celui qui peut être compatible avec le plus grand nombre de navigateurs, car il n'a pas besoin de propriétés CSS3. Cependant, la méthode ne fonctionnera pas sur les navigateurs qui ne prennent pas en charge contentdeditable , soyez prudent.

Solution avec un div contenteditable

Comme proposé par @Getz , vous pouvez utiliser un div avec contenteditablepuis le façonner avec un peu de div dessus. Voici un exemple, avec deux blocs qui flottent en haut à gauche et en haut à droite de la div principale:

Comme vous pouvez le voir, vous devez jouer un peu avec les bordures si vous voulez le même résultat que celui demandé dans votre post. Le div principal a la bordure bleue de chaque côté. Ensuite, les blocs rouges doivent être collés pour masquer les bordures supérieures de la division principale, et vous devez leur appliquer une bordure uniquement sur des côtés particuliers (en bas et à gauche pour le bloc de droite, en bas et à droite pour la gauche).

Après cela, vous pouvez obtenir le contenu via Javascript, lorsque le bouton " Soumettre " est déclenché par exemple. Et je pense que vous pouvez également gérer le reste du CSS ( font-size, color, etc.) :)

Exemple de code complet

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

Dans un avenir proche, nous pouvons utiliser ce qu'on appelle css-shapespour y parvenir. Un div avec l' contenteditableattribut défini sur truecombiné avec css-shapespeut créer une zone de texte de n'importe quel type de forme.

Actuellement, Chrome Canary est déjà compatible css-shapes . Un exemple de ce qui est possible avec les formes css est:

Ici, ils utilisent une forme de polygone pour définir le flux de texte. Il devrait être possible de créer deux polygones pour correspondre à la forme souhaitée pour votre zone de texte.

Plus d'informations css-shapesont été écrites sur: http://sarasoueidan.com/blog/css-shapes/

Pour activer les formes CSS dans Chrome Canary:

1. Copiez et collez chrome: // flags / # enable-experimental-web-platform-features dans la barre d'adresse, puis appuyez sur entrée.
2. Cliquez sur le lien «Activer» dans cette section.

3. Cliquez sur le bouton «Relancer maintenant» au bas de la fenêtre du navigateur.

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

Polygone créé avec: http://betravis.github.io/shape-tools/polygon-drawing/

Résultat

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

Peut-être que c'est possible avec Content Editable ?

Ce n'est pas une zone de texte, mais si vous réussissez à créer un div avec cette forme, cela pourrait fonctionner.

Je pense que ce n'est pas possible avec juste une zone de texte ...

Un petit exemple: http://jsfiddle.net/qgfP6/5/

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

Vous pouvez travailler avec un div contentable, avec deux div coins:

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

Vous pouvez également le faire avec les régions CSS

Avec les régions, vous pouvez utiliser les propriétés CSS pour transférer le contenu dans des conteneurs stylisés existants, en spécifiant l'ordre des conteneurs que vous choisissez, quelle que soit leur position sur la page.

(Plateforme Web)

[Actuellement pris en charge dans WebKit Nightly, Safari 6.1+ et iOS7 et déjà utilisable dans Chrome et Opera après avoir activé l'indicateur: enable-experimental-web-platform-features - caniuse , Web Platform ]

VIOLON

Vous pouvez donc créer cette forme de zone de texte en faisant passer le texte à travers 2 régions et en le modifiant en ajoutant contenteditable sur le contenu.

Marquage

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

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

Le résultat:

Pour plus d'informations sur les régions - voici un bon article: régions CSS3: mise en page riche avec HTML et CSS3

Une longue ligne de texte dans la boîte laissera tomber le curseur au-delà des bords du milieu et je n'arrive pas à résoudre ce problème.

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

Ce n'est pas possible sire! Une zone de texte est généralement une zone rectangulaire ou carrée, où vous pouvez taper.

Cependant, pour faire quelque chose comme ça, vous pouvez utiliser 2 zones de texte et leur donner une largeur et une hauteur spécifiées. Sinon, je ne pense pas que ça va arriver!

La deuxième méthode consisterait à créer un élément modifiable.

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

Le code est:

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

En utilisant cela, vous pouvez rendre n'importe quel élément modifiable! Vous pouvez lui donner des dimensions et ça marchera! Vous l'obtiendrez comme une zone de texte.

Référence: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

Si vous combinez des formes CSS avec contenteditablecela, cela peut être fait dans les navigateurs webkit.

Vous devez d'abord activer le drapeau: enable-experimental-web-platform-features

Redémarrez ensuite votre navigateur webkit et vérifiez ce FIDDLE !

Cette méthode fonctionnera également pour les formes non standard.

Marquage

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

Alors, comment diable ai-je obtenu cette forme de polygone?

Allez sur ce site et faites votre propre forme personnalisée!

Remarques sur l'activation du drapeau: (à partir d' ici )

Pour activer les modes Formes, Régions et Fusion:

Copiez et collez chrome: // flags / # enable-experimental-web-platform-features dans la barre d'adresse, puis appuyez sur entrée. Cliquez sur le lien «Activer» dans cette section. Cliquez sur le bouton «Relancer maintenant» au bas de la fenêtre du navigateur.

Vous pouvez utiliser l' outil de conception de sites Web Google pour créer des formes complexes à l'aideHTML5-canvas and CSS .

De plus, vous obtiendrez d'autres outils comme des outils de saisie pour saisir des textes à l'intérieur de ces formes.

Comme le fichier de sortie contient beaucoup de code, fournir un violon d'un exemple de démonstration créé à l'aide de l' outil Google Web Designer

FIDDLE DEMO >>

Si, pour une raison quelconque, vous avez vraiment besoin de prendre en charge des navigateurs qui n'en ont pas contenteditable, vous pouvez probablement faire la même chose en JavaScript, en utilisant des événements, bien que ce soit une solution très compliquée.

Pseudocode:

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