Необычная форма текстового поля в HTML

Часто при создании веб-страницы может возникнуть потребность в создании текстового поля нестандартной формы. Стандартные текстовые поля, которые создаются с помощью элемента <textarea>, имеют прямоугольную или квадратную форму. Но что делать, если требуется создать текстовое поле нестандартной формы, например, круглой или многоугольной?

Нестандартные формы с помощью CSS

К сожалению, с помощью HTML напрямую создать текстовое поле нестандартной формы не получится. Однако, с помощью CSS можно внести некоторые изменения в стандартную форму <textarea>. Например, можно создать круглое текстовое поле с помощью свойства border-radius:

<textarea style="border-radius:50%;"></textarea>

Также можно создать текстовое поле с закругленными углами:

<textarea style="border-radius:10px;"></textarea>

Нестандартные формы с помощью SVG

Другой вариант — использовать SVG для создания нестандартной формы текстового поля. SVG позволяет создавать сложные формы, которые затем можно использовать как маску для текстового поля.

<svg>
  <defs>
    <mask id="myMask">
      <rect width="100%" height="100%" fill="white"/>
      <circle cx="50%" cy="50%" r="40%" fill="black"/>
    </mask>
  </defs>
  <foreignObject mask="url(#myMask)" width="100%" height="100%">
    <textarea xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;"></textarea>
  </foreignObject>
</svg>

В этом примере создается круглое текстовое поле с помощью SVG-маски.

Вывод

Создание текстового поля нестандартной формы может потребоваться при создании веб-страницы. Хотя HTML не позволяет напрямую создать такое поле, с помощью CSS и SVG можно достичь нужного результата.