简介

首先，在其他文章中提出了许多解决方案。我认为这是目前(2013年)可以与最多数量的浏览器兼容的一个，因为它不需要任何CSS3属性。但是，该方法在不支持contentdeditable的浏览器上不起作用，请小心。

用一个div来解决

正如@Getz所提议的，你可以使用一个带contentteditable的div，然后用一些div来塑造它。下面是一个例子，有两个块浮动在主div的左上方和右上方:

正如你所看到的，如果你想要得到和你在帖子中要求的相同的结果，你必须对边界进行一些处理。主div的每一面都有蓝色边框。接下来，红色块必须隐藏主div的顶部边界，你只需要在特定的方面应用边界(底部和左边为右块，底部和右边为左块)。

之后，你可以通过Javascript获取内容，例如当“提交”按钮被触发时。而且我认为你也可以处理CSS的其余部分(字体大小，颜色等):)

完整的代码示例

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

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

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

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

小提琴演示> >

你也可以用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的富页面布局

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

然而，要做出这样的东西，你可以使用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

在不久的将来，我们可以使用所谓的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/

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

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

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

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

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