Genellikle textareas dörtgen ya da kare, Bu gibi:

Ama özel şekilli bir button, örneğin böyle istiyorum:

Bu nasıl mümkün olabilir?

Giriş

İlk olarak, pek çok çözüm, başka görevlerde önerdi. Bu bir anda (2013) herhangi bir CSS3 özellikleri ihtiyacı yok, çünkü tarayıcılar en büyük sayı ile uyumlu olabilir, hangi biri olduğunu düşünüyorum. Ancak, yöntem 11* contentdeditable*dikkatli ol üzerinde çalışmaz.

Bir div contenteditable ile çözüm

@Getz tarafından önerilen contenteditable ile bir div kullanmak ve biraz da div ile şekil. İşte bir örnek, sol üst ve ana div sağ üst tarafında yüzen iki blok ile

Gördüğünüz gibi, varsınırları olan küçük bir oyunyazınızı istediğiniz gibi aynı sonucu istiyorsanız. Ana div her tarafta mavi bir kenarlığı vardır. Sonraki, kırmızı blokları ana div üst sınırları gizle yapışmasını ve özellikle taraf sadece onlara kenarlık uygulamak için gerekenalt ve solsağ blok içinalt ve sağsol).

O zaman bundan sonra, Javascript ile içerik alabilirsiniz, " dediGönder" düğmesini örneğin tetiklenir. Ve ayrıca CSS (font-size, color, vb.) gerisini halledersin sanırım :)

Tam kod örneği

.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>