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

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

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

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

你可以使用一个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结合起来，这可以在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”链接 部分。 点击浏览器底部的“重新启动”按钮 窗口。

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

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

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

小提琴演示> >