HTML-und CSS-Fluid-Kreis

Ich bin versuchen, um eine fluid-Kreis mit HTML und CSS. Ich bin fast fertig aber wie sollte es auch flüssig und der Inhalt ist dynamisch, Sie verändert Ihre Form vom Kreis zum oval und andere.

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;
}

HTML:

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

Können Sie mir bitte helfen?

  • Stellen Sie sicher, testen Sie es ändern von text innerhalb des div, die von 12 bis 100 und etc
  • Ich habe viele Antworten darauf, die Verwendung von JavaScript, um die Durchsetzung einer quadratischen Seitenverhältnis des Elements für eine 50% border-radius. Ich schrieb vor kurzem einen blog-post auf, wie dies getan werden kann, allein mit CSS: ansciath.tumblr.com/post/7347495869/css-aspect-ratio
  • Oh, und Safari noch nicht ordnungsgemäß zu behandeln einen border-radius in Prozent angegeben.
InformationsquelleAutor Umair A. | 2011-07-08
Schreibe einen Kommentar