添加分隔符欄邊框

Question

什麼目前我們已經是像

，目標是用兩個像下面的圖片

歲的分隔符的表已經使用Pure CSS Circular Percentage Bar插件來實現它。

而且對巴雙方的年齡加隔板試圖給：

秩序，陰影，高度，寬度

到下面的類。

.pie，.c100的.bar：.pie後，.c100的.bar：前

.c100 .slice：前.c100 .slice：後

等與其他元素，但沒有得到成功。

和小提琴的同樣是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>

需要在某種程度上，我們可以動態改變的百分比值的解決方案。

Answer 1

這裏看到的片段，如果這能幫助

.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>

Answer 2

您可以添加的.bar：前後的.bar：後

.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; 
} 

最後它會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>

你可以只使左，邊框寬度屬性的變化而變化的寬度。

Answer 3

我試過這個，我認爲你可以應用相同的CSS來填充類，然後改變它的剪輯來增加弧的大小。如果您正在動態更改條形圖類的剪輯值，那麼您也可以對填充進行相同的操作。

.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>

Answer 4

這是我能做到的最好。我在僞元素前後添加了.slice，並向它們添加了不同的剪輯值，並向前僞元素旋轉了90度。僞元素鏈接到CSS，所以調整旋轉也會調整僞僞元素。

.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>

Answer 5

這表明使用.bar:before和.bar:after是錯誤的，因爲這個對象沒有關於進度條的開頭和結尾信息的答案。

請注意，「剪輯」屬性已使用兩次 - 第一次使用應用於.slice，第二次應用於.bar對象。這些「剪輯」定義了條紋的開始和結束位置。

所以，解決的辦法是兩個使用pseudoselectors：

.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; 
} 

請檢查工作示例： fiddle