通常 textareas 是矩形或正方形，像这样：
但我想要一个自定义形状的文本区域，例如：
这怎么可能？
文本区域的不寻常形状？
IT技术
javascript
jquery
html
css
2021-02-21 15:47:28
6个回答
介绍
首先，有很多解决方案，在其他帖子中提出。我认为这是目前（2013 年）可以兼容最多浏览器的一种，因为它不需要任何 CSS3 属性。但是，该方法不适用于不支持 的浏览器 contentdeditable，请注意。
用div解决 contenteditable
正如@Getz所提议的，您可以使用 divcontenteditable并在其上添加一些 div 对其进行整形。这是一个示例，其中有两个块漂浮在主 div 的左上角和右上角：
如您所见，如果您想要与您在帖子中要求的结果相同的结果，则必须稍微调整一下边框。主 div 的每一侧都有蓝色边框。接下来，必须粘贴红色块以隐藏主 div 的顶部边框，并且您只需要在特定边（底部和左侧为右侧块，底部和右侧为左侧）为它们应用边框。
之后，您可以通过 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来实现这一点。contenteditable属性设置为true组合的divcss-shapes可以使文本区域成为任何类型的形状。
目前 Chrome Canary 已经支持 css-shapes. css-shapes 的一个例子是：
在这里，他们使用多边形来定义文本流。应该可以创建两个多边形来匹配文本区域所需的形状。
有关的更多信息css-shapes已写在：http : //sarasoueidan.com/blog/css-shapes/
要在 Chrome Canary 中启用 css-shapes：
- 将 chrome://flags/#enable-experimental-web-platform-features 复制并粘贴到地址栏中，然后按 Enter。
- 单击该部分中的“启用”链接。
单击浏览器窗口底部的“立即重新启动”按钮。
.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/
结果
也许可以使用Content Editable？
它不是一个 textarea，但如果你成功地用这个形状创建了一个 div，它就可以工作。
我认为仅使用 textarea 是不可能的...
一个小例子：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 Platform ]
小提琴
因此，您可以通过将文本流过 2 个区域来制作该 textarea 形状，并通过在内容上添加 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 的丰富页面布局