Alguma maneira de dar border radius a este código?

Drakezael · 14/01/2017

Codigo:

HTML:

.pie-wrapper.progress-30 .pie .half-circle {
  border-radius: 50%  !important;	 
  -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
  -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
  border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
  border-image-slice: 1;

Asi me esta quedando. :grumpy:

Como quiero que quede: 😛4:

sevilla666 · 14/01/2017

Pues la verdad que en github hay un código muy bueno que podrías mirartelo:
Demo
Código
Editando un poco el código tienes lo que buscas

Drakezael · 14/01/2017

sevilla666 disse:
Pues la verdad que en github hay un código muy bueno que podrías mirartelo:
Demo
Código
Editando un poco el código tienes lo que buscas

hola si, justo ese estoy usando, pero de igual manera no me deja que el radius sea degradado, pero es mas limpio que el que estaba usando, entiendo mejor el codigo!

ramifenili · 14/01/2017

¿No tenés el código completo para ver cómo está implementado?

sevilla666 · 14/01/2017

Drakezael disse:
hola si, justo ese estoy usando, pero de igual manera no me deja que el radius sea degradado, pero es mas limpio que el que estaba usando, entiendo mejor el codigo!

Solo tienes que cambiar los estilos:

Inserir CODE, HTML ou PHP:

.percircle {
    background-color: "color del fondo de la web"


.percircle::after {
    background-color: "color del circulo central"

ramifenili disse:
¿No tenés el código completo para ver cómo está implementado?

Código

Alexk · 14/01/2017

En internet ya tienes muchos:
Search Results for pie chart on CodePen
Un saludo :encouragement:

Drakezael · 14/01/2017

estoy usando este

html

HTML:

<!DOCTYPE html>
<html>
    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Pure CSS Percentage Circle</title>

        <meta name="description" content="">

        <!-- styles for this little demo page -->
        <style type="text/css">

            body{
                background-color: #f5f5f5;
                margin: 0;
                padding: 0;
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            }

            .page {
                margin: 40px;
            }

            h1{
                margin: 40px 0 60px 0;
            }

            .dark-area {
                background-color: #666;
                padding: 40px;
                margin: 0 -40px 20px -40px;
                clear: both;
            }

            .clearfix:before,.clearfix:after {content: " "; display: table;}
            .clearfix:after {clear: both;}
            .clearfix {*zoom: 1;}

        </style>

        <link rel="stylesheet" href="css/circle.css">

    </head>

    <body>

                <div class="c100 p45 small orange">
                
                    <div class="slice">
                        <div class="bar"></div>
                        <div class="fill"></div>
                    </div>
                </div>

            </div>
            
    </body>
</html>

este el css que controla la forma, hay una cadena super larga que controla el % pero no tiene nada que ver con eso..

la linea que controla el color de la barra es esta porsupuesto:

.c100.orange .fill {
border-color:darkgreen!important;
}

HTML:

.c100 {
align-content: center;
  position: relative;
  font-size: 120px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  float: left;
  margin: 0 0.1em 0.1em 0;

}

.c100.center {
  float: none;
  margin: 0 auto;
}
.c100.big {
  font-size: 240px;
}
.c100.small {
  font-size: 80px;
}
.c100 > span {
  position: absolute;
  width: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  width: 5em;
  line-height: 5em;
  font-size: 0.2em;
  color: #cccccc;
  display: block;
  text-align: center;
  white-space: nowrap;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.c100:after {
  position: absolute;
  top: 0.08em;
  left: 0.08em;
  display: block;
  content: " ";
  border-radius: 50%;
  background-image: url('../img/fondo.png');
    background-repeat: no-repeat;
  width: 0.84em;
  height: 0.84em;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}
.c100 .slice {
  position: absolute;
  width: 1em;
  height: 1em;
  clip: rect(0em, 1em, 1em, 0.5em);
}

.c100.orange .bar,
.c100.orange .fill {
  border-color:darkgreen!important;
}

ramifenili · 14/01/2017

sevilla666 disse:
Solo tienes que cambiar los estilos:

Inserir CODE, HTML ou PHP:

.percircle { background-color: "color del fondo de la web" .percircle::after { background-color: "color del circulo central"

Código

Te recomendaría que cambies el código. Para rellenar con color, usa un borde. Para aplicar el degradado que querés, tenés que modificar mucho y tal vez no se vea bien todos los navegadores.

Acá hay uno que usa lo que querés: jQuery Circle Progress Plugin Demos 😛7:

Desde esta página explican cómo usarlo: jQuery Plugin For Circular Progress Indicators - Circle Progress | Free jQuery Plugins :encouragement:

Drakezael · 14/01/2017

ramifenili disse:
Te recomendaría que cambies el código. Para rellenar con color, usa un borde. Para aplicar el degradado que querés, tenés que modificar mucho y tal vez no se vea bien todos los navegadores.

Acá hay uno que usa lo que querés: jQuery Circle Progress Plugin Demos 😛7:

Desde esta página explican cómo usarlo: jQuery Plugin For Circular Progress Indicators - Circle Progress | Free jQuery Plugins :encouragement:

estoy trabajando en el, luego les cuento como me quedo o si la cague xD gracias de verdad 😛4:😛4:😛4::boxing1::boxing1::boxing1::boxing1::love_heart::love_heart::love_heart::love_heart:

sevilla666 · 14/01/2017

Ese codigo que has puesto está mejor que el que puse yo, ya que solo utiliza css. Lo único que no tiene animaciones.
Solo tienes que cambiar:

Inserir CODE, HTML ou PHP:

.c100 {
    background-color: "por el color del fondo de tu pagina"

Y

.c100::after {
    background-color: "por el color que quieras del circulo interior"

erickdmc13 · 29/01/2017

te sirvira nombrar el border-radius? en cada etiqueta de estilo?

Alguma maneira de dar border radius a este código?

Drakezael

Anexos

sevilla666

Drakezael

ramifenili

sevilla666

Alexk

Drakezael

ramifenili

Drakezael

sevilla666

erickdmc13

Tópicos similares