practice

　　　　

<html>
<meta charset="utf-8">

<style>
.コンテナ{width:calc(100%-40px);
margin:0 auto;
max-width:800px;}
h1{font-size:24px;
color:#123456;
font-weight:bold;
margin-left:80px;
margin-bottom:20px;}
.エリア{margin-top:100px;}
@media screen and (min-width:751px)
{.ラップ{display:flex;
justify-content:center;
align-items:center;}}
.ボックス{position:relative;
min-width:200px;
width:30%;
height:300px;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
background #ffffff;
box-shadow:0 10px 20px rgba(0,0,0,0.4);}
@media screen and (min-width:751px)
{.ボックス{margin-left:40px;}}
.ポジション{position:relative;
width:150px;
height:150px;
fill:none;
stroke-width:10;
stroke:#f3f3f3;
stroke-dasharray:440;
stroke-dashoffset:0;
stroke-linecap:round;}
.パーセント{position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
color:#123456;}
.データ{font-size:50px;}
span{font-size:24px;}
.ネーム{padding:10px 0 0;
text-align:center;
font-weight:bold;
font-size:14px;}
.ライン_グレープ{stroke-dashoffset:300;
stroke:#abcdef;
animation:ターン 1s forwards;}
.ライン_アップル{stroke-dashoffset:224;
stroke:#ff8888;
animation:ターン 1s forwards;}
.ライン_キウイ{stroke-dashoffset:350;
stroke:#55cc55;
animation:ターン 1s forwards;}
@keyframes ターン{0%{stroke-dasharray:0 440;}
99.9%,to{stroke-dasharray:440 440;}}
</style>

<div class="コンテナ">
<div id="パイチャート"class="エリア セット">
<h1>フルーツの消費</h1>
<div class="ラップ">
<div class="ボックス グレープ">
<div class="ポジション">
<svg>
<circle class="サークル"cx="75"cy="75"r="70"></circle>
<circle class="ライン_グレープ"cx="75"cy="75"r="70"></circle>
</svg>
<div class="パーセント">
<h3 class="データ">30<span>%</span></h3>
</div>
<p class="ネーム">グレープ</p>
</div></div>
<div class="ボックス アップル">
<div class="ポジション">
<svg>
<circle class="サークル"cx="75"cy="75"r="70"></circle>
<circle class="ライン_アップル"cx="75"cy="75"r="70"></circle>
</svg>
<div class="パーセント">
<h3 class="データ">45<span>%</span></h3>
</div>
<p class="ネーム">アップル</p>
</div></div>
<div class="ボックス キウイ">
<div class="ポジション">
<svg>
<circle class="サークル"cx="75"cy="75"r="70"></circle>
<circle class="ライン_キウイ"cx="75"cy="75"r="70"></circle>
</svg>
<div class="パーセント">
<h3 class="データ">25<span>%</span></h3>
</div>
<p class="ネーム">キウイ</p>
</div></div>
</div></div></div>

</html>