HTML und CSS Fluid Circle

Question

Ich versuche, einen fließenden Kreis mit HTML und CSS zu erstellen. Ich bin fast fertig, aber da er flüssig sein sollte und der Inhalt darin dynamisch ist, ändert er seine Form von Kreis zu Oval und anderem.

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>

Können Sie mir bitte helfen?

Answer 1

El border-radius:50% Hack, den Sie verwenden, geht von der Annahme aus, dass die <div> quadratisch ist, bevor die abgerundeten Ecken angewendet werden, da sonst ein Oval statt eines Kreises entsteht, genau wie Sie festgestellt haben.

Wenn Sie also wollen, dass der Kreis kreisförmig bleibt, während sich der Inhalt ausdehnt, müssen Sie die Höhe dynamisch an die Breite anpassen. Um dies zu erreichen, müssen Sie wahrscheinlich Javascript verwenden.

Bitte beachten Sie auch, dass border-radius wird von älteren IE-Versionen nicht unterstützt, so dass Benutzer von IE6, IE7 oder IE8 Ihren Kreis nicht sehen werden. (Allerdings gibt es dafür einen Hack namens CSS3Pie )

Natürlich ist die Anpassung der height hat den Nebeneffekt, dass das Element vertikal mehr Platz einnimmt. Das ist vielleicht nicht das, was Sie wollen. Vielleicht möchten Sie, dass der Kreis die gleiche Größe hat, unabhängig davon, welchen Inhalt er hat. In diesem Fall sollten Sie die Höhe und Breite des Kreises festlegen und dem Inhalt position:absolute; um zu verhindern, dass es die Größe seines Elternteils beeinflusst.

Eine Alternative zur Verwendung der border-radius Hack, um einen Kreis zu erzeugen, wäre die Verwendung von SVG. SVG ist ein Vektorgrafikformat, das in den meisten Browsern eingebettet ist.

Auch hier ist die bemerkenswerte Ausnahme der IE8 und früher, aber IE unterstützt ein alternatives Format namens VML. Es gibt verschiedene Skripte, die zwischen SVG und VML konvertieren können, so dass Sie eine browserübergreifende Lösung mit SVG plus Javascript erstellen können.

Wenn wir akzeptieren, dass Javascript Teil der Lösung ist, könnten Sie einfach eine Javascript-Bibliothek verwenden, um es in erster Linie zu zeichnen. Mein Vorschlag hierfür wäre Raphael das je nach Browser SVG- oder VML-Grafiken erzeugt.

Ich hoffe, das hilft.

Answer 2

Sie müssen beides einstellen width y height auf das Maximum von diesen beiden, um ein Quadrat zu rendern, das mit 50% Radius Ecken in einen Kreis ergibt.

Sie können dies in jQuery tun:

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

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

Versuchen Sie, den Inhalt zu ändern (sowohl in der Breite als auch in der Höhe) aquí

Answer 3

Beispiel für einen fließenden Kreis nur mit HTML und CSS. Wie in meinen Kommentaren zu der Frage erwähnt, wird die Technik in meinem Blog-Beitrag . Wie bereits erwähnt, kann Safari derzeit nicht mit einem als Prozentsatz angegebenen Randradius umgehen.

Answer 4

Der Weg als Jose Rui Santos können Sie Ihr Ziel erreichen. Aber tun einige Änderungen in Ihrem css.

Wie Polsterung entfernen aus .notify > div und fügen Stile wie diesen hinzu:

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

und fügen Sie Polsterung in .notify Klasse wie diese:

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

}

und Jquery-Code, wie sie von Jose Rui Santos :

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

Sehen Sie sich die funktionierende Demo an: http://jsfiddle.net/2j5Ek/63/

Answer 5

Sie brauchen eine Möglichkeit, Höhe / Breite zu erzwingen, sonst wird es einfach oval... es ist möglich!

auf dieser html

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

dieses jQuery-Skript sollte es tun..

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