Dodawanie separator do baru granicę

Co obecnie mamy jest cośDodawanie separator do baru granicę

a celem jest wykres z separatora na obu grup wiekowych, jak na poniższym obrazie

użyłem wtyczki Pure CSS Circular Percentage Bar, aby to osiągnąć.

I dodać separator po obu wieki próbowali dając paska:

zamówienie, cień, wysokość, szerokość

do następnej klasy.

.pie, .c100 .bar: po .pie, .c100 .bar: przed

.c100 .slice: przed .c100 .slice: po

i tak dalej z inne elementy, ale nie udało się osiągnąć sukcesu.

I skrzypce na to samo https://jsfiddle.net/bhavikvaishnani/r7emrhv8/6/

.pie, 
 
.c100 .bar { 
 
    position: absolute; 
 
    border: 0.08em solid #307bbb; 
 
    width: 0.84em; 
 
    height: 0.84em; 
 
    clip: rect(0em, 0.5em, 1em, 0em); 
 
    border-radius: 50%; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
} 
 

 
.c100 { 
 
    position: relative; 
 
    font-size: 120px; 
 
    width: 1em; 
 
    height: 1em; 
 
    border-radius: 50%; 
 
    float: left; 
 
    margin: 0 0.1em 0.1em 0; 
 
    background-color: #cccccc; 
 
} 
 

 
.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-color: #f5f5f5; 
 
    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.p25 .bar { 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
}

<div class="c100 p25"> <span>25%</span> 
 
    <div class="slice"> 
 
    <div class="bar"></div> 
 
    <div class="fill"></div> 
 
    </div> 
 
</div>

Potrzebujesz rozwiązania w taki sposób możemy dynamicznie zmieniać wartość procentową.

Źródło

2017-09-26 BJ Patel

chciałbym zaproponować, aby korzystać wykresy D3 zamiast tych wykresów. Tam dostaniesz więcej odmian i funkcjonalności. –

Zobacz fragment tutaj, jeśli to może pomóc

.pie, 
 
.c100 .bar { 
 
    position: absolute; 
 
    border: 0.08em solid #307bbb; 
 
    width: 0.84em; 
 
    height: 0.84em; 
 
    clip: rect(0em, 0.5em, 1em, 0em); 
 
    border-radius: 50%; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
} 
 

 
.c100 { 
 
    position: relative; 
 
    font-size: 120px; 
 
    width: 1em; 
 
    height: 1em; 
 
    border-radius: 50%; 
 
    float: left; 
 
    margin: 0 0.1em 0.1em 0; 
 
    background-color: #cccccc; 
 
} 
 

 
.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-color: #f5f5f5; 
 
    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 .slice:before {} 
 

 
.c100.p25 .bar { 
 
    -webkit-transform: rotate(180deg); 
 
    -moz-transform: rotate(180deg); 
 
    -ms-transform: rotate(180deg); 
 
    -o-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
} 
 

 
.c100 .slice:before, 
 
.c100 .slice:after {} 
 

 
.pie, 
 
.c100 .bar:after, 
 
.pie, 
 
.c100 .bar:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    box-shadow: 
 
} 
 
div.bar:before { 
 
    content: ""; 
 
    position: absolute; 
 
    border: 0.08em solid #ffffff; 
 
    width: 0.84em; 
 
    height: 0.84em; 
 
    clip: rect(0em, 0.5em, 1em, 0em); 
 
    border-radius: 50%; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    transform: rotate(180deg); 
 
    box-sizing: content-box; 
 
left: -0.1em !important; 
 
    top: -0.08em !important; 
 
}

<body> 
 
     <div class="c100 p25"> <span>25%</span> 
 
       <div class="slice"> 
 
       <div class="bar"></div> 
 
       <div class="fill"></div> 
 
       </div> 
 
      
 
      </div> 
 

 
</body>

Źródło

2017-09-26 06:45:11

Łuk nie wygląda tak, jakby reprezentował 25%. –

Dzięki za poświęcony czas. ale niewiele pomaga, jeśli chodzi o dynamiczną zmianę wartości. –

Możesz dodać .bar: przed i .bar: po

.c100 .bar:before { 
    border: 2px solid #fff; 
    left: -10px; 
    top: 47px; 
    width: 10px; 
} 

.c100 .bar:after { 
    content: "|"; 
    top: -21px; 
    position: absolute; 
    border: 3px solid #fff; 
    left: 47px; 
    padding:0; 
    margin:0; 
    display:block; 
}

Wreszcie będzie jsfiddle

.pie, 
 
.c100 .bar { 
 
    position: absolute; 
 
    border: 0.08em solid #307bbb; 
 
    width: 0.84em; 
 
    height: 0.84em; 
 
    clip: rect(0em, 0.5em, 1em, 0em); 
 
    border-radius: 50%; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
} 
 

 
.c100 { 
 
    position: relative; 
 
    font-size: 120px; 
 
    width: 1em; 
 
    height: 1em; 
 
    border-radius: 50%; 
 
    float: left; 
 
    margin: 0 0.1em 0.1em 0; 
 
    background-color: #cccccc; 
 
} 
 

 
.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-color: #f5f5f5; 
 
    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 .slice:before {} 
 

 
.c100.p25 .bar { 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 

 
.c100 .slice:before, 
 
.c100 .slice:after {} 
 

 
.pie, 
 
.c100 .bar:after, 
 
.pie, 
 
.c100 .bar:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    box-shadow: 
 
} 
 

 
.c100 .bar:before { 
 
    border: 2px solid #fff; 
 
    left: -10px; 
 
    top: 47px; 
 
    width: 10px; 
 
} 
 

 
.c100 .bar:after { 
 
    content: "|"; 
 
    top: -21px; 
 
    position: absolute; 
 
    border: 3px solid #fff; 
 
    left: 47px; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: block; 
 
}

<body> 
 
    <div class="c100 p25"> <span>25%</span> 
 
    <div class="slice"> 
 
     <div class="bar"></div> 
 
     <div class="fill"></div> 
 
    </div> 
 

 
    </div> 
 

 
</body>

można tylko dokonać zmian w majątku lewej i szerokość ramki, aby zmienić szerokość.

Źródło

2017-09-26 06:56:07

Dziękujemy za poświęcony czas. ale działa tylko na 25%, a nie na dynamiczne –

Próbowałem tego, myślę, że możesz zastosować te same css do wypełnienia klasy, a następnie zmienić klip, aby zwiększyć rozmiar łuku. Jeśli dynamicznie zmieniasz wartość klipu dla klasy prętów, możesz zrobić to samo dla wypełnienia.

.pie, 
 
.c100 .bar { 
 
    position: absolute; 
 
    border: 0.08em solid #307bbb; 
 
    width: 0.84em; 
 
    height: 0.84em; 
 
    clip: rect(0em, 0.5em, 0.5em, 0em); 
 
    border-radius: 50%; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
} 
 

 
.c100 { 
 
    position: relative; 
 
    font-size: 120px; 
 
    width: 1em; 
 
    height: 1em; 
 
    border-radius: 50%; 
 
    float: left; 
 
    margin: 0 0.1em 0.1em 0; 
 
    background-color: #cccccc; 
 
} 
 

 
.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-color: #f5f5f5; 
 
    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; 
 
} 
 

 
.c100.p25 .bar { 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
    z-index:101; 
 
} 
 

 
.c100.p25 .fill { 
 
    position: absolute; 
 
    border: 0.08em solid #fff; 
 
    width: 0.84em; 
 
    height: 0.84em; 
 
    clip: rect(0em, 0.55em, 0.55em, 0em); 
 
    border-radius: 50%; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(90deg); 
 
    z-index: 100; 
 
}

<div class="c100 p25"> <span>25%</span> 
 
    <div class="slice"> 
 
     <div class="bar"></div> 
 
     <div class="fill"></div> 
 
    </div> 
 
</div>

Źródło

2017-10-02 07:41:18 Tapas

To jest najlepsze, co mogę zrobić.Dodałem przed i po pseudo elementach do .slice i dodałem do nich różne wartości klipów oraz obrót o 90 stopni do poprzedniego pseudo elementu. Pseudo elementy są połączone z CSS .slice, więc regulacja obrotu dostosuje również pseudo element po.

.pie, 
 
.c100 .bar, .c100 .slice:before, .c100 .slice:after { 
 
    position: absolute; 
 
    border: 0.08em solid #307bbb; 
 
    width: 0.84em; 
 
    height: 0.84em; 
 
    clip: rect(0em, 0.5em, 1em, 0em); 
 
    border-radius: 50%; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
} 
 

 
.c100 .slice:before, .c100 .slice:after { 
 
    content:" "; 
 
    display:block; 
 
    border: 0.08em solid #fff; 
 
    z-index:2; 
 
} 
 
.c100 .slice:before { 
 
    clip:rect(0.47em, 0.1em, 1em, 0em); 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 
.c100 .slice:after { 
 
    clip:rect(0em, 0.5em, 1em, 0.47em); 
 
} 
 

 
.c100 { 
 
    position: relative; 
 
    font-size: 120px; 
 
    width: 1em; 
 
    height: 1em; 
 
    border-radius: 50%; 
 
    float: left; 
 
    margin: 0 0.1em 0.1em 0; 
 
    background-color: #cccccc; 
 
} 
 

 
.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-color: #f5f5f5; 
 
    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.p25 .bar, .c100 .slice:after { 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
}

<div class="c100 p25"> <span>25%</span> 
 
    <div class="slice"> 
 
    <div class="bar"></div> 
 
    <div class="fill"></div> 
 
    </div> 
 
</div>

Źródło

2017-10-05 21:04:22 WizardCoder

Odpowiedź które sugerują użycie .bar:before i .bar:after jest źle, bo ten obiekt nie ma informacji o początku i końcu paska postępu.

Należy zauważyć, że właściwość "klip" została użyta dwukrotnie - pierwsze użycie jest stosowane do obiektu .slice, a drugie do obiektu .bar. Te "klipy" określają, gdzie jest początek i koniec paska.

Więc rozwiązaniem jest użycie pseudoselectors zarówno:

.c100 .slice:before { 
    content: ''; 
    position: absolute; 
    width: 5px; 
    height: .08em; 
    background-color: #fff; 
    left: calc(50% - 3px); 
    z-index: 2; 
} 

.c100 .bar:before { 
    content: ""; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 5px; 
    transform: rotate(90deg); 
    background-color: #fff; 
}

proszę sprawdzić na przykładzie pracy: fiddle

Źródło

2017-10-09 08:04:18 luke

Dodawanie separator do baru granicę

Odpowiedz

Powiązane problemy