Alguna manera de darle border radius a este codigo?

Drakezael · 14 Ene 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 Ene 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 Ene 2017

sevilla666 dijo:
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 Ene 2017

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

sevilla666 · 14 Ene 2017

Drakezael dijo:
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:

Insertar CODE, HTML o PHP:

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


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

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

Código

Alexk · 14 Ene 2017

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

Drakezael · 14 Ene 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 Ene 2017

sevilla666 dijo:
Solo tienes que cambiar los estilos:

Insertar CODE, HTML o 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 Ene 2017

ramifenili dijo:
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 Ene 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:

Insertar CODE, HTML o 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 Ene 2017

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

Alguna manera de darle border radius a este codigo?

Drakezael

Adjuntos

sevilla666

Drakezael

ramifenili

sevilla666

Alexk

Drakezael

ramifenili

Drakezael

sevilla666

erickdmc13

Temas similares