简介

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

小提琴演示> >

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

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

对于区域，您可以使用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的富页面布局

简介

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

如果出于某种原因，您确实需要支持不具有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;
    }
    }