HTML
CSS
JS
Run
<!-- start pie chart --> <div class="piechart"> <span class="name">Asset</span> </div> <!-- end pie chart -->
.piechart { position: relative; margin: 30px auto 0; width: 290px; height: 290px; border-radius: 50%; background-image: conic-gradient( #B827FF 0% 70%, #f7e8ff 70% 100%); } .piechart:before { content:""; position: absolute; top: 0px; left: 0px; width: 290px; height: 290px; border-radius: 50%; box-shadow: 0px 1px 50px rgb(0 0 0 / 8%); } .piechart .name{ width: 230px; height: 230px; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; }
<script></script>
Press Ctrl+Space Key for Auto complete and Intelli Sense
