HTML и CSS Fluid Circle

Question

Я пытаюсь создать плавный круг, используя 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>

Можете ли вы мне помочь, пожалуйста?

Answer 1

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

Поэтому, если вы хотите, чтобы круг оставался круглым при расширении содержимого, вам необходимо динамически регулировать высоту в соответствии с шириной. Вам, вероятно, понадобится использовать 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 графику в соответствии с браузером, в котором он запущен.

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

Answer 2

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

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

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

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

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

Answer 3

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

Answer 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/

Answer 5

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

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

Answer 6

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

в этом HTML

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

этот скрипт jQuery должен это сделать ..

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