Sometimes, we want to create a text area with an unusual shape with HTML and CSS.
In this article, we’ll look at how to create a text area with an unusual shape with HTML and CSS.
How to create a text area with an unusual shape with HTML and CSS?
To create a text area with an unusual shape with HTML and CSS, we use a contenteditable element.
For instance, we write
<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 world
</div>
to set the contenteditable attribute to true to let us edit the contents of the div.
And we can apply whatever styles we want to them.
Conclusion
To create a text area with an unusual shape with HTML and CSS, we use a contenteditable element.
