您可以使用谷歌网页设计工具使用HTML5-canvas和CSS创建复杂的形状。

更多的是，你会得到其他工具，如键入工具，在这些形状中输入文本。

由于输出文件包含大量代码，提供了一个使用谷歌Web Designer工具创建的示例演示

小提琴演示> >

在不久的将来，我们可以使用所谓的css形状来实现这一点。将contentteditable属性设置为true的div结合css-shapes可以使文本区域成为任何形状。

目前Chrome Canary已经支持css形状。使用css-shapes的一个例子是:

这里他们使用多边形形状来定义文本流。它应该可以创建两个多边形来匹配你想要的文本区域的形状。

关于css-shape的更多信息请参见:http://sarasoueidan.com/blog/css-shapes/

在Chrome Canary中启用css形状: 复制粘贴 //flags/#enable-experimental-web-platform-features 地址栏，然后按enter。 点击其中的“Enable”链接 部分。 点击底部的“重新启动”按钮 浏览器窗口。 来自: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/

您可以使用谷歌网页设计工具使用HTML5-canvas和CSS创建复杂的形状。

更多的是，你会得到其他工具，如键入工具，在这些形状中输入文本。

由于输出文件包含大量代码，提供了一个使用谷歌Web Designer工具创建的示例演示

小提琴演示> >

这是不可能的，陛下!文本区域通常是一个矩形或方形框，您可以在其中输入。

然而，要做出这样的东西，你可以使用2个文本区域，然后给他们一个指定的宽度和高度。否则我不认为它会发生!

第二种方法是创建一个可编辑元素。

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

代码是:

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

使用这个，你可以使任何元素可编辑!你可以给它一个维度，它会起作用的!你会得到它只是一个文本区域。

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

文本框中的长行文本会使光标下降到中间边缘，我似乎无法修复这个问题。

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

也许这是可能的内容编辑?

它不是一个文本区域，但如果你成功地用这个形状创建了一个div，它就可以工作。

我认为这是不可能的只有textarea…

一个小例子:http://jsfiddle.net/qgfP6/5/

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