简介

首先，在其他文章中提出了许多解决方案。我认为这是目前(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工具创建的示例演示

小提琴演示> >

你可以使用一个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>

如果出于某种原因，您确实需要支持不具有contentteditable的浏览器，那么您可能可以在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;
    }
    }

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

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

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