HTML 和 CSS 流体圈

Question

I am trying to create a fluid circle using HTML and CSS. I am almost done but as it should be fluid and content inside is dynamic, it's changing its shape from circle to oval and others.

 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>

Can you help me please?

Answer 1

The border-radius:50% hack which you're using makes the assumption that the <div> is square prior to the rounded corners being applied, otherwise it will produce an oval rather than a circle, exactly as you've noted.

Therefore, if you want the circle to remain circular as the content expands, you need to dynamically adjust the height to match the width. You'd probably need to use Javascript to achieve this.

Also, please note that border-radius is not supported in older versions of IE, so users with IE6, IE7 or IE8 won't see your circle at all. (though there is a hack for it called CSS3Pie )

Of course, adjusting the height will have the side effect of making the element take up more space vertically. This may not be what you want; you may want the the circle to be the same size regardless of what content is in it? In this case, you should fix the height and width of the circle, and give the content position:absolute; to prevent it from affecting the size of its parent.

An alternative to using the border-radius hack to produce a circle would be to use SVG. SVG is a vector graphics format which is embedded into most browsers.

Again, the notable exception is IE8 and earlier, but IE supports an alternative format called VML. Various scripts exist which can convert between SVG and VML, so you can produce a cross-browser solution with SVG plus Javascript.

If we're going to accept the Javascript is part of the solution, you could simply use a javascript library to draw it in the first place. My suggestion for this would be Raphael , which generates SVG or VML graphics according to the browser it's running it.

Hope that helps.

Answer 2

You need to set both width and height to the maximum of these both, in order to render a square, that with 50% radius corners, results into a circle.

You can do this in jQuery:

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

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

Try to change content (both in width and height) here

Answer 3

Example of a fluid circle using only HTML and CSS. As mentioned in my comments to the question, the technique is explained in my blog post . Also as mentioned, Safari does not currently play nice with a border radius specified as a percentage.

Answer 4

The way as Jose Rui Santos did you can achieve your goal. But do few changes in your css.

Like remove padding from .notify > div and adding styles like this:

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

and add padding into .notify class like this:

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

}

and Jquery code as mentioned by Jose Rui Santos :

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

See the working Demo: http://jsfiddle.net/2j5Ek/63/

Answer 5

you need a way to enforce height / width otherwise it will just go oval... its possible!

on this html

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

this jQuery script should do it..

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

Answer 6

Forcing it's maximum height and weight by setting max-width:XXpx; max-height:XXpx max-width:XXpx; max-height:XXpx will do the job.

Please note that you may need to use CSS3 word-wrap: break-word; to break the words. Cross-browser compatibility might be an issue.