通常，文本区域是矩形或正方形，如下所示：

但是我想要一个自定义形状的文本区域，例如：

这怎么可能？

介绍

首先，在其他职位中提出了许多解决方案。我认为目前（2013年）可以与数量最多的浏览器兼容，因为它不需要任何CSS3属性。但是，该方法不适用于不支持的浏览器 contentdeditable，请小心。

div解决方案 contenteditable

正如@Getz所建议的那样，您可以使用div contenteditable并在其上加上一些div的形状。这是一个示例，其中两个块浮在主div的左上角和右上角：

如您所见，如果您想要与帖子中请求的结果相同的结果，则必须对边界进行一些操作。主div的每一侧都有蓝色边框。接下来，必须粘贴红色块以隐藏主div的顶部边框，并且您只需要在特定边上对其应用边框（右侧块的底部和左侧，左侧块的右侧和底部）。

之后，例如，当触发“ Submit ”按钮时，您可以通过Javascript获取内容。我想你也可以处理CSS（其余font-size，color等等）:)

完整代码示例

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

在不久的将来，我们可以使用所谓的方法css-shapes来实现这一目标。用一个DIV contenteditable属性设置为true联合css-shapes可以使文本区域的任何一种形状。

目前，Chrome Canary已经支持 css-shapes。一个使用css-shapes的示例是：

在这里，他们使用多边形来定义文本流。应该可以创建两个多边形来匹配您的文本区域所需的形状。

有关更多信息，请css-shapes参见：http : //sarasoueidan.com/blog/css-shapes/

要在Chrome Canary中启用CSS形状：

1. 将chrome：// flags /＃enable-experimental-web-platform-features复制并粘贴到地址栏中，然后按Enter。
2. 点击该部分中的“启用”链接。

3. 点击浏览器窗口底部的“立即重新启动”按钮。

   来自：http : //html.adobe.com/webplatform/zh_CN/

.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，则它可以工作。

我认为仅文本区域是不可能的...

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

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

您可以使用具有两个角落div的contenteditable 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区域执行此操作

使用Regions，您可以使用CSS属性将内容流到现有样式的容器中，指定您选择的任何容器顺序，无论它们在页面上的位置如何。

（网络平台）

[当前在WebKit Nightly，Safari 6.1+和iOS7中受支持，并且在启用以下标记后已可在chrome和Opera中使用：enable-experimental-web-platform-features- caniuse，Web平台 ]

小提琴

因此，您可以通过使文本在2个区域中流动来使文本区域具有形状，并通过在内容上添加contenteditable来对其进行编辑。

标记

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

不可能的父亲！文本区域通常是矩形或方形框，您可以在其中输入。

但是，要进行类似的操作，可以使用2个textarea，然后为它们指定宽度和高度。否则我认为它不会发生！

第二种方法是制作一个可编辑的元素。

http://jsfiddle.net/afzaal_ahmad_zeeshan/at2ke/

代码是：

<div contenteditable="true">
   This text can be edited by the user.
</div>

使用此功能，您可以使任何元素都可编辑！您可以为其赋予尺寸，它将起作用！您将获得它作为文本区域。

参考：https : //developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_Editable

如果您将CSS形状与contenteditable此结合，则可以在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;
}

那么我到底是怎么得到多边形的呢？

转到此网站并制作您自己的自定义形状！

有关启用标志的注意事项：（从此处开始）

要启用形状，区域和混合模式：

将chrome：// flags /＃enable-experimental-web-platform-features复制并粘贴到地址栏中，然后按Enter。点击该部分中的“启用”链接。点击浏览器窗口底部的“立即重新启动”按钮。

您可以使用Google Web设计器工具使用来创建复杂的形状HTML5-canvas and CSS。

此外，您还将获得其他工具，例如键入工具，以在这些形状内输入文本。

由于输出文件包含很多代码，因此提供了使用Google Web Designer工具创建的示例演示的小技巧。

现场演示>>

如果出于某种原因，您确实需要支持没有 contenteditable可以通过使用事件在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;
    }
    }