Я могу подумать пару способов:
Оберните текстовый блок большим элементом, измените его размер таким образом, чтобы круг подходил (вам понадобятся некоторые серьезные математические навыки!) И используйте кросс-браузерную библиотеку Raphael , чтобы нарисовать круг это.
На основе ширины и высоты текстового блока корректируйте верхний / нижний отступ, пока прямоугольник не станет квадратным, и выберите наиболее подходящий фон из предварительно отрисованных изображений разного размера.
Пример кода (с использованием jQuery), чтобы получить вторую идею, полностью непроверенную:
var images = [300, 200, 100]; // image dimensions from biggest to smallest
var textbox = $('#my-textbox');
var padding = 20; // base padding, choose your own
var w = textbox.width();
var h = textnox.height();
var filler = (w > h ? (w - h) : (h - w)) / 2; // how much extra padding needed?
var pver = w > h ? filler : padding; // padding vertical
var phor = w > h ? padding : filler; // padding horizontal
textbox.css({ paddingTop: pver, paddingBottom: pver,
paddingLeft: phor, paddingRight phor });
$.each(images, function(i, dimension) {
if (dimension < textbox.width())
textbox.css('backgroundImage', 'url(/img/circle_' + dimension + '.png)');
});