通常文本区域是矩形或正方形，就像这样:
但我想要一个自定义形状的文本区域，就像这样，例如:
这怎么可能呢?
当前回答
如果你把CSS形状和contentteditable结合起来，这可以在webkit浏览器中完成。
首先你必须启用标志:enable-experimental-web-platform-features
然后重新启动您的webkit浏览器，然后检查这小提琴!
这种方法也适用于非标准形状。
标记
<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;
}
那么我到底是怎么得到这个多边形的呢?
去这个网站，让你自己的自定义形状!
关于启用标志的注意事项: (从这儿)
要启用形状、区域和混合模式: 复制粘贴 //flags/#enable-experimental-web-platform-features 地址栏，然后按enter。点击其中的“Enable”链接 部分。 点击浏览器底部的“重新启动”按钮 窗口。
其他回答
你可以使用一个contentteditable div，带有两个角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>
也许这是可能的内容编辑?
它不是一个文本区域，但如果你成功地用这个形状创建了一个div，它就可以工作。
我认为这是不可能的只有textarea…
一个小例子:http://jsfiddle.net/qgfP6/5/
<div contenteditable="true">
</div>
如果你把CSS形状和contentteditable结合起来，这可以在webkit浏览器中完成。
首先你必须启用标志:enable-experimental-web-platform-features
然后重新启动您的webkit浏览器，然后检查这小提琴!
这种方法也适用于非标准形状。
标记
<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;
}
那么我到底是怎么得到这个多边形的呢?
去这个网站，让你自己的自定义形状!
关于启用标志的注意事项: (从这儿)
要启用形状、区域和混合模式: 复制粘贴 //flags/#enable-experimental-web-platform-features 地址栏，然后按enter。点击其中的“Enable”链接 部分。 点击浏览器底部的“重新启动”按钮 窗口。
你也可以用CSS区域来做到这一点
对于区域，您可以使用CSS属性将内容流动到现有的区域 有样式的容器，指定你选择的任何容器顺序， 不管它们在纸上的位置。
(网络平台)
[目前支持WebKit Nightly, Safari 6.1+和iOS7，并已在chrome和opera启用标志:enable-experimental-web-platform-features - caniuse, Web Platform]
小提琴
所以你可以使文本区域形状通过流动的文本通过2个区域，并通过添加contentteditable内容编辑它。
标记
<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的富页面布局
您可以使用谷歌网页设计工具使用HTML5-canvas和CSS创建复杂的形状。
更多的是，你会得到其他工具，如键入工具，在这些形状中输入文本。
由于输出文件包含大量代码，提供了一个使用谷歌Web Designer工具创建的示例演示
小提琴演示> >
