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

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

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

简介

首先，在其他文章中提出了许多解决方案。我认为这是目前(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形状和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”链接 部分。 点击浏览器底部的“重新启动”按钮 窗口。