HTML и CSS Fluid Circle

Я пытаюсь создать жидкостный круг, используя HTML и CSS. Я почти готов, но поскольку он должен быть жидким, а содержание внутри динамично, оно меняет свою форму от круга до овала и других.

body {
  position: relative;
}
.notify {
  position: absolute;
  top: 100%;
  left: 20%;
  background: red;
  border: 2px solid white;
  border-radius: 50%;
  text-align: center;
}
.notify > div {
  padding: 20px;
}

<div class="notify">
  <div>
    12
  </div>
</div>

Ответ 1

Используемый вами border-radius:50% hack делает предположение о том, что <div> является квадратным до применения закругленных углов, иначе он будет создавать овал, а не круг, как вы уже отметили.

Поэтому, если вы хотите, чтобы круг оставался круглым по мере расширения содержимого, вам необходимо динамически регулировать высоту в соответствии с шириной. Для этого вам, вероятно, понадобится использовать Javascript.

Также обратите внимание, что border-radius не поддерживается в более старых версиях IE, поэтому пользователи с IE6, IE7 или IE8 вообще не будут видеть ваш круг. (хотя есть хак для него под названием CSS3Pie)

Конечно, настройка height будет иметь побочный эффект от того, чтобы элемент занимал больше места по вертикали. Возможно, это не то, что вы хотите; вы можете захотеть, чтобы круг был того же размера, независимо от того, какой контент в нем? В этом случае вы должны зафиксировать высоту и ширину круга и предоставить контент position:absolute;, чтобы он не влиял на размер его родителя.

Альтернативой использованию border-radius взлома для создания круга будет использование SVG. SVG - это векторный графический формат, встроенный в большинство браузеров.

Опять же, заметным исключением является IE8 и ранее, но IE поддерживает альтернативный формат, называемый VML. Существуют различные сценарии, которые могут конвертировать между SVG и VML, поэтому вы можете создавать кросс-браузерное решение с SVG и Javascript.

Если мы собираемся принять, что Javascript является частью решения, вы можете просто использовать библиотеку javascript, чтобы нарисовать его в первую очередь. Мое предложение для этого было бы Raphael, которое генерирует графику SVG или VML в соответствии с браузером, который он запускает.

Надеюсь, что это поможет.

Ответ 2

Вам нужно установить как width, так и height максимум их обоих, чтобы отобразить квадрат, который с 50% -ными углами радиуса, приводит к кругу.

Вы можете сделать это в jQuery:

$(function() {
  var $elem = $(".notify > div");
  var maxSize = Math.max($elem.width(), $elem.height());

  $elem.width(maxSize).height(maxSize);
});

Попробуйте изменить содержимое (как по ширине, так и по высоте) здесь

Ответ 3

Пример круга жидкости, используя только HTML и CSS. Как упоминалось в моих комментариях к вопросу, эта техника объясняется в сообщении в блоге. Также, как уже упоминалось, Safari в настоящее время не играет хорошо с радиусом границы, указанным в процентах.

Ответ 4

В качестве Jose Rui Santos вы могли бы достичь своей цели. Но сделайте несколько изменений в вашем css.

Как удалить дополнение из .notify > div и добавить такие стили:

.notify > div
{    
    display: table-cell;
    vertical-align: middle;
}

и добавьте дополнение в класс .notify следующим образом:

.notify
{
    position: absolute;
    top: 100%;
    left: 20%;
    background: red;
    border: 2px solid white;
    border-radius: 50%;
    padding: 30px;
    text-align: center;

}

и код JQuery, как указано в Jose Rui Santos:

var $elem = $(".notify > div");
var maxSize = Math.max($elem.width(), $elem.height());
$elem.width(maxSize).height(maxSize);

См. рабочий демонстрационный пример: http://jsfiddle.net/2j5Ek/63/

Ответ 5

вам нужен способ для обеспечения высоты/ширины, иначе он будет просто овальным... его возможным!

на этом html

<div class="notify">
    <div class="child">
        12334        
    </div>
</div>

этот jQuery script должен сделать это.

var cw = $('.child').width();
$('.child').css({
    'height': cw + 'px',
    'line-height': cw + 'px'
});

Ответ 6

Принуждение к максимальной высоте и весу установкой max-width:XXpx; max-height:XXpx выполнит задание.

Обратите внимание, что вам может понадобиться использовать CSS3 word-wrap: break-word; для разрыва слов. Совместимость между браузерами может быть проблемой.