how to create a half bordered circle(only css, not js or even svg)?


Tags: css,css3,css-shapes

Problem :

I am interested in creating something like the picture below. A counter box with a transparent background and a thin border, plus an icon in the bottom of that semi circle.

enter image description here

I made something like what I want, see below:

.chartBottom{
   width:0;
   height:0;
   border:60px solid #c45;
   border-bottom:60px solid transparent;
   border-radius: 60px;
 }

But the problem of this trick is that it can't have any transparent background. Any ideas?



Solution :

use this code instead of using border 60px and setting width and height to zero.use width and height and border 1px;

.chartBottom{
    width:60px;
    height:60px;
    border:1px solid #c45;
    border-bottom:1px solid transparent;
    border-radius: 60px
}

here is jsfiddle for you to see.


    CSS Howto..

    how to change a css class onclick?

    js Find Class Within Div + toggle CSS/Hide One Show Other

    How do I alter this HTML/CSS to make the container expand horizontally to the floated children?

    How to set both a background colour and a different text color on the same element

    How to add media='screen' in css using cakePHP?

    how to make smooth grayscale on hover using CSS

    How to add transition to CSS3 Animation steps

    How can i see or how do i know where to put the control according to the screen when using css?

    How to add offset border to image of unknown size?

    How do I set jQuery accordion default to unopened? And toggle open/closed?

    how do I properly position a button element with css?

    How to let Fancybox Next and Previous button stay visible

    How to change elements display order in CSS?

    How to disable a YUI MenuBarItem from markup

    How to dynamically change CSS elements to be HTTPS or HTTP

    How to print data from left to right in html using css

    Bootstrap 3 Glyphicons not showing correctly

    How can i setup my php code to change my CSS background picture daily [closed]

    How do I give one stylesheet precedence over the other with Rails?

    how to position a div for all screen resolutions

    how do you create tags like stackoverflow with text styling

    How (where) can i set fixed cell size in nested html tables, with css?

    How to customize responsive columns and inputs fields in twitter bootstrap?

    How to add JS and CSS file in web page based on parameter?

    How to select non-header cells with css

    HTML+CSS : how to move not close divs to create a right column?

    How to work with fixed positioning in CSS?

    How can I display two images horizontally?

    How do I get CSS table columns to line up?

    How to apply CSS(background image) to radiobutton when it clicks?