0

境界線の半径を持つ棒グラフの境界線スタイルとして、背景が黒のdivコンテナを置き換えようとしています。HTML/CSSは次のとおりです。

HTML：

<div class="graph-outer">
    <div class="inner-left-cap"></div>
    <div class="inner-left-bar">40%</div>
    <div class="inner-right-bar">60%</div>
    <div class="inner-right-cap"></div>
</div>

CSS：

.graph-outer {
    background-color: black;
    height: 20px;
    width: 300px;   
    border-radius: 10px;
    padding: 1px;
}

.inner-left-cap {
    background: orange;
    width: 2%;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    float: left;
}

.inner-left-bar {
    background: orange;
    width: 38%;
    height: 100%;
    text-align: center;
    float: left;
}

.inner-right-cap {
    background: red;
    width: 2%;
    height: 100%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    float: left;
}

.inner-right-bar {
    background: red;
    width: 58%;
    height: 100%;
    text-align: center;
    float: left;
}

http://jsfiddle.net/2ZkDz/115/

私が抱えている問題は、角が黒い境界線のスタイルを持っているようには見えないということです。私に何ができる？

4

4 に答える 4

2

このバージョンは、overflow：hiddenを使用し、外部コントローラーに明示的な境界線を付け、パディングなしで使用します。

.graph-outer {
    background-color: black;
    height: 20px;
    width: 300px;   
    border:1px solid black;
    border-radius: 10px;
    overflow:hidden;
}

.inner-left-cap {
    background: orange;
    width: 2%;
    height: 100%;
    float: left;
}

.inner-left-bar {
    background: orange;
    width: 38%;
    height: 100%;
    text-align: center;
    float: left;
}

.inner-right-cap {
    background: red;
    width: 2%;
    height: 100%;
    float: left;
}

.inner-right-bar {
    background: red;
    width: 58%;
    height: 100%;
    text-align: center;
    float: left;
}
​

http://jsfiddle.net/2ZkDz/116/

于 2013-01-03T23:53:50.677 に答える
0

CSSを更新しました。上限をそれぞれ3％に変更し、バーを小さくしました。内側のバーがキャップを越えていました。

.graph-outer {
    background-color: black;
    height: 20px;
    width: 300px;   
    border-radius: 10px;
    padding: 1px;
}

.inner-left-cap {
    background: orange;
    width: 3%;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    float: left;
}

.inner-left-bar {
    background: orange;
    width: 37%;
    height: 100%;
    text-align: center;
    float: left;
}

.inner-right-cap {
    background: red;
    width: 3%;
    height: 100%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    float: left;
}

.inner-right-bar {
    background: red;
    width: 57%;
    height: 100%;
    text-align: center;
    float: left;
}
​

http://jsfiddle.net/2ZkDz/119/

于 2013-01-03T23:53:52.060 に答える
0

エンドキャップのないソリューション（バーの幅が値と一致するように）

デモjsfiddle

高さはgraph-outer20pxなので、ネストされたバーは18px（20px-2px（1pxの上下のパディング））、バーの境界半径をそれぞれ9pxに設定します（高さの半分で、各コーナーが均一で、親の曲率と一致します）

.inner-left-bar {
    background: orange;
    width: 40%;
    height: 100%;
    text-align: center;
    float: left;
    border-radius:9px 0 0 9px; /* add this */
}

.inner-right-bar {
    background: red;
    width: 60%;
    height: 100%;
    text-align: center;
    float: left;
    border-radius:0 9px 9px 0; /* and this */
}

/* and drop the end-caps */
​
于 2013-01-03T23:55:15.443 に答える
0

http://jsfiddle.net/2ZkDz/120/

border-radius: 10px;
padding: 2px;

それでいいはずです！ボーダー半径を投げて、パディング1をぶつけました。実際のボーダープロパティを使用するより簡単な方法があるはずですが、怠惰な感じがします。

于 2013-01-03T23:56:30.710 に答える