Зазвичай текстові області мають прямокутну або квадратну форму, наприклад:

Але я хочу, щоб текстові вироби на зразок цього типу, наприклад:

Як це можливо?

Вступ

По-перше, існує багато рішень, запропонованих в інших посадах. Я думаю, що цей на даний момент (у 2013 році) той, який може бути сумісним з найбільшою кількістю браузерів, оскільки йому не потрібні властивості CSS3. Однак метод не працюватиме на браузерах, які не підтримують contentdeditable , будьте обережні.

Розв’язання з дівом contenteditable

Як запропонував @Getz , ви можете використовувати div з, contenteditableа потім сформувати його з деяким дівом на ньому. Ось приклад з двома блоками, які плавають у верхньому лівому і верхньому правому куті головного поділу:

Як бачите, вам доведеться трохи пограти з бордюрами, якщо ви бажаєте того ж результату, як просили у своєму дописі. У головного діва є синя рамка з усіх боків. Далі слід приклеїти червоні блоки, щоб приховати верхні межі головного поділу, і потрібно застосувати до них рамку лише з певних сторін ( знизу та зліва для правого блоку, знизу та праворуч зліва).

Після цього ви можете отримати вміст через 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поєднаних із, css-shapesможе надати області тексту будь-яку форму.

Наразі Chrome Canary вже підтримується css-shapes . Приклад, що можливо для css-форм, це:

Тут вони використовують форму багатокутника для визначення потоку тексту. Потрібно створити два полігони, щоб вони відповідали потрібній формі для вашої текстової області.

Більше інформації про css-shapesце було написано на веб-сайті: http://sarasoueidan.com/blog/css-shapes/

Щоб увімкнути css-форми в Chrome Canary:

1. Скопіюйте та вставте chrome: // flags / # enable-експериментально-веб-платформа-функції в адресний рядок, а потім натисніть клавішу Enter.
2. Натисніть посилання "Увімкнути" в цьому розділі.

3. Натисніть кнопку "Відновити зараз" у нижній частині вікна браузера.

   від: 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/

Можливо, це можливо із вмістом для редагування вмісту ?

Це не текста, але якщо вам вдасться створити діву з цією формою, це може спрацювати.

Я думаю, що це неможливо лише з текстовими областями ...

Маленький приклад: http://jsfiddle.net/qgfP6/5/

<div contenteditable="true">
</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 і вже використовується в хромі та опері після ввімкнення прапора: enable-експериментально-веб-платформа-функції - кануза , веб-платформа ]

ПІДТВОРЕННЯ

Таким чином, ви можете зробити цю текстову форму, перетягнувши текст через 2 регіони, і відредагувати його, додавши змістовний вміст у вміст.

Розмітка

<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 текстильних ділянки, а потім надати їм задану ширину та висоту. Інакше я не думаю, що це станеться!

Другим методом було б зробити елемент, який можна редагувати.

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 форми з contenteditableцим, це можна зробити в веб-браузерах.

Спочатку потрібно включити прапор: enable-експериментальний-web-платформа-функції

Потім перезавантажте веб-браузер і перевірте цю ПІДТВОРЕННЯ !

Цей метод буде працювати і для нестандартних форм.

Розмітка

 <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-експериментально-веб-платформа-функції в адресний рядок, а потім натисніть клавішу Enter. Натисніть посилання "Увімкнути" в цьому розділі. Натисніть кнопку "Відновити зараз" у нижній частині вікна браузера.

Ви можете використовувати інструмент веб-дизайнера Google для створення складних фігур за допомогою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;
    }
    }