CSS/HTML/any alternatives to border-radius OR overflow:hidden? - html

Question

I'm currently working on a project that involves a circle being randomly filled with a color to a certain point. I used a div with border-radius to create the circle + overflow:hidden and another div to imitate the 'filling'.
See JSFiddle
HTML:
<div class="circleswrap">
<div class="circlediv">
<div class="circle">
<div id="animateddiv1">
</div>
</div>
</div>
</div>
CSS:
.circle {
position: relative;
border-radius: 50%;
-o-border-radius: 50%;
overflow: hidden;
background: #8a8a8a;
width: 165px;
height: 165px;
display: inline-block;
margin: 0 75px;.
}
#animateddiv1 {
background: #63B23A;
position: absolute;
top: 130px;
width: 200px;
height: 165px
}
Awesome works great in my browsers BUT i have to get it to work on a outdated Opera browser which is integrated into a smart display monitor (and practically un-updateable).
As we all know the older versions of Opera did not support the combination of border-radius + overflow:hidden + position: relative/absolute
PS: I Know -o-border-radius is not a 'thing' but i tried it nontheless... a man can always dream :^)
I've been trying to find a solution but i'm out of ideas.
I hope this wonderful community can help me out :)

Answer 1

This is a bit of a shot in the dark, as i don't know the version of opera required. But you can try to use a background-image: linear-gradient();
like this:
setInterval(function () {
var percentage = Math.floor(Math.random() * 100);
$(".circle").css("background-image", 'linear-gradient( 0deg, #63B23A ' + percentage + '%, #8a8a8a ' + percentage + '%' + ' )')
}, 3000);
This seems to be supported from Opera 11.1
Of course don't foget the browser prefix -o-
So the code could look like this:
setInterval(function () {
var percentage = Math.floor(Math.random() * 100);
$(".circle").css("background-image", '-o-linear-gradient( 0deg, #63B23A ' + percentage + '%, #8a8a8a ' + percentage + '%' + ' )')
}, 3000);
here is a demo: http://jsfiddle.net/05dkfoxj/2/
Good luck.

Answer 2

The CSS clip-path property lets you specify an SVG shape to use as a mask for HTML content; that is probably the canonical way to do this moving forward.
I assume the version of Opera you're using is too old to support this property, or probably anything else that does what you want in a non-hacky way. If the circle is on a solid colored background, you could superimpose an opaque mask of the same color, i.e. a PNG with a circle cut out of it. More ambitiously, you might be able to use something like this technique to generate the image dynamically on a canvas, which (if it works) would allow for non-solid backgrounds. That would be complicated, though, and probably not feasible if any of the elements involved need to respond to pointer events.
Alternatively, if the content of the circles is just a picture, and not interactive, you could use a canvas to render the entire thing. Even quite old browsers should handle that, and CanvasRenderingContext2D knows how to clip drawing to a shape.

Answer 3

If the circle is against a solid background like in your example, you could create a PNG or SVG with the same colour background with a circle cut out and use it as an overlay. Remove the .circle element and place the image in .circlediv. It should give you the same effect as what you have.
.circlediv
{
width: (image width)
height: (image height)
postition: relative;
}
svg, png
{
z-index: 2;
width: 100%;
height: 100%;
position: absolute;
/* rest of your styling */
}
#animateddiv1
{
z-index:1;
position: absolute;
bottom:0;
width:100%;
/* rest of your styling */
}
I always tend to do this sort of thing because I know it'll work, even though I'd prefer to do it your way. You'll have issue in older versions of IE using border-radius, if you're supporting them.