Clever Geek Handbook

Partial color of triangle in pie chart in html

I need this below html [and trying to get pie chart in html with different color]

enter image description here

You need to be like below

enter image description here

Any help on this? I need to apply partial color for each pie in html, JSFiddle here http://jsfiddle.net/x4mdC/26/

my html

<!DOCTYPE html>
<html>
 <head>
  <title> Pie </title>
  <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7;IE=9" />
  <link rel="stylesheet" href="opera.css"/>
 </head>

 <body>
<div class="pieContainer">
       <div class="pieBackground"></div>
     <div id="pieSlice1" class="hold"><div class="pie"> </div></div>
      <div id="pieSlice2" class="hold"><div class="pie"> </div></div>
     <div id="pieSlice3" class="hold"><div class="pie"> </div></div>
     <div id="pieSlice4" class="hold"><div class="pie"> </div></div> 
         <div class="piecenteric"></div>
         </div><script type="text/javascript" src="jquery.min.js"></script>
</body>
</html>

My CSS

.pieContainer {
          height: 700px;
          margin-left:288px;
          margin-top: 86px;
     }

     .pieContainercircle {
     border: 2px solid blue;
     padding:10px;
     }

     .pieBackground {
          background-color: grey;
          position: absolute;
           height:350px;
     width:700px;
     border-radius: 700px 700px 0 0;

     -moz-border-radius: 700px 700px 0 0;
          -webkit-border-radius: 700px 700px 0 0;
          -o-border-radius: 700px 700px 0 0;

          -moz-box-shadow: -1px 1px 3px #000;
          -webkit-box-shadow: -1px 1px 3px #000;
          -o-box-shadow: -1px 1px 3px #000;
          box-shadow: -1px 1px 3px #000;
     }
     .pie {
          position: absolute;
          width: 700px;
          height: 700px;
          -moz-border-radius: 350px;
          -webkit-border-radius: 350px;
          -o-border-radius: 350px;
          border-radius: 350px;
          clip: rect(0px, 350px, 700px, 0px);
     }
     .hold {
          position: absolute;
          width: 700px;
          height: 700px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          clip: rect(0px, 700px, 700px, 350px);
     }

     #pieSlice1 .pie {
          background-color: #B17BF5;
          -webkit-transform:rotate(90deg);
          -moz-transform:rotate(90deg);
          -o-transform:rotate(90deg);
          transform:rotate(90deg);
     }
     #pieSlice2 {
          -webkit-transform:rotate(149deg);
          -moz-transform:rotate(149deg);
          -o-transform:rotate(149deg);
          transform:rotate(149deg);
     }
     #pieSlice2 .pie {
          background-color: #F55696;
          -webkit-transform:rotate(301deg);
          -moz-transform:rotate(301deg);
          -o-transform:rotate(301deg);
          transform:rotate(301deg);
     }
     #pieSlice3 {
          -webkit-transform:rotate(190deg);
          -moz-transform:rotate(190deg);
          -o-transform:rotate(190deg);
          transform:rotate(190deg);
     }
     #pieSlice3 .pie {
          background-color: #F65E59;
          -webkit-transform:rotate(304deg);
          -moz-transform:rotate(304deg);
          -o-transform:rotate(304deg);
          transform:rotate(304deg);
     }
     #pieSlice4 {
          -webkit-transform:rotate(270deg);
          -moz-transform:rotate(270deg);
          -o-transform:rotate(270deg);
          transform:rotate(270deg);
     }
     #pieSlice4 .pie {
          background-color: #2997E6;
          -webkit-transform:rotate(323deg);
          -moz-transform:rotate(323deg);
          -o-transform:rotate(323deg);
          transform:rotate(323deg);
     }

    #pieSlice1 div.pieborder {
     border: 5px solid yellow;
     }


     div.piecenteric {
    background-color: white;
    border-radius: 300px 300px 0 0;
    height: 200px;
    margin-left: 172px;
    margin-top: 150px;
    position: absolute;
    width: 355px;
    z-index:1;

}
+3


source to share


1 answer


Demo

Html

<div class="pieContainer">
    <div class="pieBackground">
        <div class="pieOverlay"></div> <!-- add this overlay div -->
    </div>
    <div id="pieSlice1" class="hold">
        <div class="pie">Introduction</div>
    </div>
    <div id="pieSlice2" class="hold">
        <div class="pie">Customer Engagement</div>
    </div>
    <div id="pieSlice3" class="hold">
        <div class="pie">Customer Insights</div>
    </div>
    <div id="pieSlice4" class="hold">
        <div class="pie">IT Solutions Considerations</div>
    </div>
    <div class="piecenteric"></div>
</div>


CSS

/* below css for overlay */

.pieOverlay {
    background-color: white;
    border-radius: 300px 300px 0 0;
    height: 200px;
    margin-left: 172px;
    margin-top: 5px;
    position: absolute;
    width: 355px;
    z-index: 2;
    z-index: 111;
    border-radius: 50%;
    height: 690px;
    margin-left: 5px;
    position: absolute;
    width: 690px;
    z-index: 4;
    box-shadow: inset 0px 1px 4px #000;
}

.pieBackground {
    background-color: grey;
    position: absolute;
    height:350px;
    width:700px;
    border-radius: 700px 700px 0 0;
    -moz-border-radius: 700px 700px 0 0;
    -webkit-border-radius: 700px 700px 0 0;
    -o-border-radius: 700px 700px 0 0;
    -moz-box-shadow: -1px 1px 3px #000;
    -webkit-box-shadow: -1px 1px 3px #000;
    -o-box-shadow: -1px 1px 3px #000;
    box-shadow: -1px 1px 3px #000;
    overflow:hidden; /* add this as well */
}
0


source






More articles:


All Articles