частичного цвета на треугольнике в круговой диаграмме в HTML

мне нужно это ниже HTML [и пытаются достичь круговой диаграммы в формате HTML с различным цветом]частичного цвета на треугольнике в круговой диаграмме в HTML

enter image description here

Нужно быть как ниже

enter image description here

Любая помощь по этому вопросу? Мне нужно применить частичное цвет для каждого пирога в HTML, JSFiddle здесь http://jsfiddle.net/x4mdC/26/

мой 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>

Мой 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; 

}

источник

2015-06-29 User123

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 */ 
}

источник

2015-06-29 07:04:19 4dgaurav

Мос и WebKit приставка для коробчатого и тени границы радиуса? Какой это год? Отлично работает :) –

частичного цвета на треугольнике в круговой диаграмме в HTML

ответ

Смежные вопросы