javascript - CSS の統計円

Question

私はこのようなことをしたいのですが、方法がわかりません。

アイデアはありますが、うまくいきません。

<div id="stats">
    <div id="men" class="circle"></div>
    <div id="women" class="circle"></div>
    <div id="white-circle" class="small-circle"></div>
</div>

<style>
#stats {
    width: 100px;
    height: 100px;
    background: white;
    position: relative;
}

.circle {
    border-radius: 100px;
    background: #CCC;
    width: 100px;
    height: 100px;
    position: absolute;
}

.circle#men {
   background: #27ae60; 
}

.circle#women {
   background: #f26646; 
}

.small-circle {
    border-radius: 100px;
    background: white;
    width: 65px;
    height: 65px;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}
</style>

score 0 · Accepted Answer

css で円を作成する方法は次のとおりです。

css で正方形を作成する方法を知っている場合は、border-radius: 100%css に追加するだけです。これにより、正方形が円に変換されます。あなたの質問に対処するためのコードを次に示します。

<html>
    <head>
        <title> Disappering Circles </title>
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
        <div id="red"></div>
        <div id="blue"></div>
        <div id="yellow"></div>
        <script type="text/javascript"></script>
    </body>
</html>

CSSは次のとおりです。

#red {
    width: 100px;
    height: 100px;
    background-color: red;
    display: inline-block;
    border-radius: 100%
}
#blue{
    width: 100px;
    height: 100px;
    background-color: blue;
    display: inline-block;
}
#yellow{
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block;
}

javascript - CSS の統計円

4 に答える 4

Related

Reference