鴻溝圈到使用CSS3

我在圈工作三個部分我想圓分爲3部分等安裝圖像鴻溝圈到使用CSS3

每個部分可點擊，我使用HTML5，CSS3和jQuery，是否有可能分裂圈成3部分？

.circle { 
 
    position: relative; 
 
    border: 1px solid black; 
 
    padding: 0; 
 
    margin: 1em auto; 
 
    width: 430px; 
 
    height: 430px; 
 
    border-radius: 50%; 
 
    list-style: none; 
 
    overflow: hidden; 
 
} 
 
li { 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 50%; 
 
    height: 50%; 
 
    transform-origin: 0% 100%; 
 
} 
 
.text { 
 
    position: absolute; 
 
    left: -100%; 
 
    width: 200%; 
 
    height: 200%; 
 
    text-align: center; 
 
    transform: skewY(-60deg) rotate(15deg); 
 
    padding-top: 20px; 
 
} 
 
li:first-child { 
 
    transform: rotate(0deg) skewY(30deg); 
 
} 
 
li:nth-child(2) { 
 
    transform: rotate(120deg) skewY(30deg); 
 
} 
 
li:nth-child(3) { 
 
    transform: rotate(240deg) skewY(30deg); 
 
} 
 
li:first-child .text { 
 
    background: green; 
 
} 
 
li:nth-child(2) .text { 
 
    background: tomato; 
 
} 
 
li:nth-child(3) .text { 
 
    background: aqua; 
 
}

<ul class="circle"> 
 
    <li> 
 
    <div class="text">1</div> 
 
    </li> 
 
    <li> 
 
    <div class="text">2</div> 
 
    </li> 
 
    <li> 
 
    <div class="text">3</div> 
 
    </li> 
 
</ul>

來源

2016-07-28 Naveed Iqbal

你可以張貼了jQuery/JavaScript，請？將使答覆更容易。謝謝！ – AgataB

對不起，只有css3與html5 .. @AgataB –

不知道svg，你可以顯示或如何使用svg在我的場景 –

希望這個片段可以幫助你一點點。也許試試用jQuery進行懸停。

.circle-outer { 
 
    position: relative; 
 
    border: 1px solid black; 
 
    padding: 0; 
 
    margin: 1em auto; 
 
    width: 430px; 
 
    height: 430px; 
 
    border-radius: 50%; 
 
    list-style: none; 
 
    overflow: hidden; 
 
} 
 
.circle { 
 
    position: absolute; 
 
    border: 1px solid black; 
 
    padding: 0; 
 
    margin: 1em auto; 
 
    width: 580px; 
 
    height: 580px; 
 
    border-radius: 50%; 
 
    list-style: none; 
 
    overflow: hidden; 
 
    left: -70px; 
 
    top: -95px; 
 
} 
 
li { 
 
    
 
} 
 
li .background { 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 50%; 
 
    height: 50%; 
 
    transform-origin: 0% 100%; 
 
} 
 
.content { 
 
    position: absolute; 
 
    z-index: 30; 
 
    text-align: center; 
 
    width: 200px; 
 
} 
 
.content .icon { 
 
    font-size: 80px; 
 
    color: #000; 
 
} 
 
.content.first { 
 
    left: 15%; 
 
    top: 30%; 
 
} 
 
.content.second { 
 
    right: 15%; 
 
    top: 30% 
 
} 
 
.content.third { 
 
    bottom: 15%; 
 
    left: 32% 
 
} 
 
li:first-child .background { 
 
    transform: rotate(0deg) skewY(30deg); 
 
} 
 
li:nth-child(2) .background { 
 
    transform: rotate(120deg) skewY(30deg); 
 
} 
 
li:nth-child(3) .background { 
 
    transform: rotate(240deg) skewY(30deg); 
 
} 
 
li:first-child .background { 
 
    background: green; 
 
} 
 
li:nth-child(2) .background { 
 
    background: tomato; 
 
} 
 
li:nth-child(3) .background { 
 
    background: aqua; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"> 
 
<div class="circle-outer"> 
 

 
    <ul class="circle"> 
 
    <li> 
 
     <a href="#"> 
 
     <div class="content first"> 
 
      <div class="icon"> 
 
      <div class="fa fa-search"></div> 
 
      </div> 
 
      <p>Text</p> 
 
     </div> 
 
     <div class="background"></div> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#"> 
 
     <div class="content second"> 
 
      <div class="icon"> 
 
      <div class="fa fa-search"></div> 
 
      </div> 
 
      <p>Text</p> 
 
     </div> 
 
     <div class="background"></div> 
 
     </a> 
 
    </li> 
 
     <li> 
 
     <a href="#"> 
 
     <div class="content third"> 
 
      <div class="icon"> 
 
      <div class="fa fa-search"></div> 
 
      </div> 
 
      <p>Text</p> 
 
     </div> 
 
     <div class="background"></div> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</div>

來源

2016-07-29 12:02:18 Phil

完美答案！ –

完美@MarcosPérezGude，Safari中唯一的問題，我在所有課程中添加了-webkit，但沒有運氣 –

檢查我的答案是：

.circle { 
 
    position: relative; 
 
    border: 1px solid black; 
 
    padding: 0; 
 
    margin: 1em auto; 
 
    width: 430px; 
 
    height: 430px; 
 
    border-radius: 50%; 
 
    list-style: none; 
 
    overflow: hidden; 
 
} 
 
li { 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: -20%; 
 
    right: -20%; 
 
    width: 70%; 
 
    height: 70%; 
 
    transform-origin: 0% 100%; 
 
} 
 
.text { 
 
    position: absolute; 
 
    left: -100%; 
 
    width: 200%; 
 
    height: 200%; 
 
    text-align: center; 
 
    transform: skewY(-60deg) rotate(15deg); 
 
    padding-top: 20px; 
 
} 
 
li:first-child { 
 
    transform: rotate(0deg) skewY(30deg); 
 
} 
 
li:nth-child(2) { 
 
    transform: rotate(120deg) skewY(30deg); 
 
} 
 
li:nth-child(3) { 
 
    transform: rotate(240deg) skewY(30deg); 
 
} 
 
li:first-child .text { 
 
    background: green; 
 
} 
 
li:nth-child(2) .text { 
 
    background: tomato; 
 
} 
 
li:nth-child(3) .text { 
 
    background: aqua; 
 
}

<ul class="circle"> 
 
    <li> 
 
    <div class="text">1</div> 
 
    </li> 
 
    <li> 
 
    <div class="text">2</div> 
 
    </li> 
 
    <li> 
 
    <div class="text">3</div> 
 
    </li> 
 
</ul>

來源

2016-07-29 12:27:01 eronax59

謝謝@ eronax59的支持，效果很棒！唯一的問題是它在Safari中顯示效果不佳 –

鴻溝圈到使用CSS3

回答

相關問題