Get started with css3pie CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with css3pie CDN - cdnhub.io</title>
  <!-- Add CSS3PIE stylesheet -->
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/css3-pie@2.1.5/css/css3-pie.min.css" />
  <!-- Add CSS3PIE script from CDN -->
  <script src="https://cdn.cdnhub.io/css3pie/2.0beta1/PIE_IE678.js"></script>
  <!-- Add your custom CSS -->
  <style type="text/css">
    .pie {
      width: 200px;
      height: 200px;
      border-radius: 50%;
    }

    .pie-chart {
      width: 100%;
      height: 100%;
    }

    .slice1 {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      -pie-background: linear-gradient(#f44336, #e57373);
    }

    .slice2 {
      -webkit-transform: rotate(60deg);
      transform: rotate(60deg);
      -pie-background: linear-gradient(#2196f3, #82b1ff);
    }

    .slice3 {
      -webkit-transform: rotate(120deg);
      transform: rotate(120deg);
      -pie-background: linear-gradient(#4caf50, #cddc39);
    }

    .slice4 {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
      -pie-background: linear-gradient(#9c27b0, #e91e63);
    }

    .slice5 {
      -webkit-transform: rotate(240deg);
      transform: rotate(240deg);
      -pie-background: linear-gradient(#ffc107, #ff9800);
    }

    .slice6 {
      -webkit-transform: rotate(300deg);
      transform: rotate(300deg);
      -pie-background: linear-gradient(#3f51b5, #673ab7);
    }
  </style>
</head>
<body>
  <div class="pie">
    <div class="pie-chart">
      <div class="slice1 pie-slice"></div>
      <div class="slice2 pie-slice"></div>
      <div class="slice3 pie-slice"></div>
      <div class="slice4 pie-slice"></div>
      <div class="slice5 pie-slice"></div>
      <div class="slice6 pie-slice"></div>
    </div>
  </div>
</body>
</html>
Get started with css3pie CDN

Stable version

How to start using css3pie CDN

All versions
