css-shapes

Here is a simple convex example. http://jsfiddle.net/swY5k/ #test{ width: 200px; height: 200px; background: #888888; border-radius: 50px; } However, I want a concave border radius. I tried making the border-radius negative but this did not work. Example of concave/convex: You can give the impression of a concave border using radial gradients on the background. For example, something like this: #test { width: 200px; height: 200px; background: #888888; background: radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px), radial-gradient(circle 20px at 120% 50%

I would like to have an percent circle indicator on my site: In this case it's showing 75%. How should this be done? I have the yellow circle in a image-file, but if it's easier to, some how, do it all using CSS, that's okay with me. Considering the shape of the progress bar (rounded end/start) I would suggest using SVG. DEMO: Radial progress bar In the following example, the progress is animated with the stroke-dasarray attribute and the % numbers are incremented with jQuery: var count = $(('#count')); $({ Counter: 0 }).animate({ Counter: count.text() }, { duration: 5000, easing: 'linear',

I just came across a neat CSS trick. Check out the fiddle... .tooltiptail { display: block; border-color: #ffffff #a0c7ff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px; } .anothertail { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png); display: block; height: 29px; width: 30px; } <div>Cool Trick: <br /> <div class="tooltiptail"></div> </div> <br /> <div>How do I get this effect with only CSS? <br /> <div class="anothertail"></div> </div> This creates a little arrow/triangle-like effect, a "tooltip tail". This

I found this example on stackoverflow: Draw Circle using css alone Which is great. But I'd like to know how to modify that example so that I can include text in the middle of the circle? I also found this: Vertically and horizontally centering text in circle in CSS (like iphone notification badge) but for some reason, its not working for me. When I create the following test code: <div class="badge">1</div> instead of a circle, I get a oval shape. I'm trying to play around with the code to see how I can get it to work. Jawad JSFiddle .circle { width: 500px; height: 500px; border-radius: 50%;