通常、textareaは次のように長方形または正方形です。

しかし、たとえば次のようなカスタム形状のテキストエリアが必要です。

これはどのようにして可能ですか？

前書き

まず、他の投稿で提案されている多くの解決策があります。これは現在（2013年）、CSS3プロパティを必要としないため、最も多くのブラウザーと互換性があるものだと思います。ただし、このメソッドは、をサポートしていないブラウザでは機能しません contentdeditable。注意してください。

divを使用したソリューション contenteditable

@Getzで提案されているように、divをで使用し、contenteditableいくつかのdivでそれを形作ることができます。次に、メインdivの左上と右上に浮かぶ2つのブロックの例を示します。

ご覧のとおり、投稿でリクエストしたのと同じ結果が必要な場合は、境界線を少し再生する必要があります。メインdivには、すべての側に青い境界線があります。次に、赤いブロックを貼り付けてメインdivの上部の境界線を非表示にする必要があります。特定の側（右ブロックの場合は下と左、左の場合は下と右）にのみ境界を適用する必要があります。

その後、たとえば「送信」ボタンがトリガーされたときに、JavaScriptを介してコンテンツを取得できます。そして、私はあなたにも（CSSの残り扱うことができると思いますfont-size、colorなど、）:)

完全なコードサンプル

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

近い将来、いわゆるcss-shapesを使用してこれを実現できます。contenteditable属性をtrue組み合わせてに設定したdivは、css-shapesテキスト領域をあらゆる種類の形状にすることができます。

現在、Chrome Canaryはすでにをサポートし ていますcss-shapes。css-shapesで可能な例は次のとおりです。

ここでは、ポリゴンシェイプを使用してテキストフローを定義しています。textareaに必要な形状に一致するように2つのポリゴンを作成できるはずです。

詳細についてcss-shapesは、http：//sarasoueidan.com/blog/css-shapes/に記載されています。

Chrome CanaryでCSSシェイプを有効にするには：

1. chrome：// flags /＃enable-experimental-web-platform-featuresをコピーしてアドレスバーに貼り付け、Enterキーを押します。
2. そのセクション内の[有効にする]リンクをクリックします。

3. ブラウザウィンドウの下部にある[今すぐ再起動]ボタンをクリックします。

   から：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/

多分それはコンテンツ編集可能で可能ですか？

これはテキストエリアではありませんが、この形状のdivの作成に成功した場合は機能します。

textareaだけでは不可能だと思います...

小さな例：http : //jsfiddle.net/qgfP6/5/

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

2つのコーナーのdivを持つcontenteditable divを使用できます。

<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、Web Platform ]

FIDDLE

したがって、テキストを2つの領域に流すことによってそのtextarea形状を作成し、コンテンツにcontenteditableを追加して編集することができます。

マークアップ

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

それは不可能です。textareaは通常、長方形または正方形のボックスであり、ここに入力できます。

ただし、そのようなものを作成するには、2つのtextareaを使用して、指定した幅と高さを指定します。そうでなければ私はそれが起こるとは思わない！

2番目の方法は、編集可能な要素を作成することです。

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

コードは次のとおりです。

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

これを使用して、任意の要素を編集可能にすることができます！あなたはそれに寸法を与えることができ、それはうまくいきます！あなたはちょうどtextareaとしてそれを取得します。

リファレンス：https : //developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

CSS形状をcontenteditableこれと組み合わせると、Webkitブラウザーで実行できます。

最初にフラグを有効にする必要があります：enable-experimental-web-platform-features

次に、Webkitブラウザーを再起動し、この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;
}

それでは、一体どのようにしてポリゴンの形状を取得したのですか

移動し、このサイトや独自のカスタムシェイプを作ります！

フラグの有効化に関する注意：（ここから）

シェイプ、リージョン、ブレンドモードを有効にするには：

chrome：// flags /＃enable-experimental-web-platform-featuresをコピーしてアドレスバーに貼り付け、Enterキーを押します。そのセクション内の[有効にする]リンクをクリックします。ブラウザウィンドウの下部にある[今すぐ再起動]ボタンをクリックします。

Google Web Designerツールを使用して、複雑な形状を作成できます。HTML5-canvas and CSS。

さらに、これらの図形の内部にテキストを入力するための入力ツールのような他のツールが表示されます。

出力ファイルには多くのコードが含まれているため、以下を使用して作成されたサンプルデモのフィドルを提供します Google Web Designerツールます

FIDDLE DEMO >>

なんらかの理由で、対応していないブラウザを本当にサポートする必要がある場合 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;
    }
    }