サークルを3つの部分で作成し、HTML/CSS /スクリプトの各部分からアクションを実行します。

Question

htmlでUIをデザインするのが初めてです。私は、参照画像ごとにデザインする必要があります。同じデザインのソースコードが必要でした。必要な作業をしてください。

サークルには3つの部分があります。各パーツをクリックしながらイベントが行われます。

https://drive.google.com/file/d/0B8QaA3VryqygYU9valJoYm9WSEU/view?usp=sharing

Answer 1

CSSでこのようなセグメント化された円を作成することが可能です。まず、コンテナ要素にborder-radius: 50%;の円を作成します。あなたはtransformとあなたのセグメントを作成より：

transform: rotate(-60deg) skewY(30deg) scale(1.2); 

説明：rotateを使用すると、skewであなたが円の中心のために必要な角度を作成し、scaleであなたはセグメントがいっぱいいることを確認し、その適切な場所に、各セグメントを配置することができます国境までの円。最後に、内部円の要素を作成するだけで完了です。

セグメントをクリック可能にするには、onclickイベントハンドラまたはjQuerys click()関数を使用できます。

this questionも参照してください。

.pie { 
 
    position: relative; 
 
    margin: 1em auto; 
 
    border: 4px solid black; 
 
    padding: 0; 
 
    width: 15em; 
 
    height: 15em; 
 
    border-radius: 50%; 
 
    list-style: none; 
 
    overflow: hidden; 
 
} 
 
.slice { 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 50%; 
 
    height: 50%; 
 
    transform-origin: 0% 100%; 
 
    border: 2px solid black; 
 
    box-sizing: border-box; 
 
    
 
} 
 
.slice-contents { 
 
    position: absolute; 
 
    left: -100%; 
 
    width: 200%; 
 
    height: 200%; 
 
    border-radius: 50%; 
 
} 
 
.slice:nth-child(1) { 
 
    transform: rotate(-60deg) skewY(30deg) scale(1.2); 
 
} 
 
.slice:nth-child(1) .slice-contents { 
 
    transform: skewY(-30deg); /* unskew slice contents */ 
 
    background: lightblue; 
 
} 
 
.slice:nth-child(2) { 
 
    transform: rotate(60deg) skewY(30deg) scale(1.2); 
 
} 
 
.slice:nth-child(2) .slice-contents { 
 
    transform: skewY(-30deg); /* unskew slice contents */ 
 
    background: lightgreen; 
 
} 
 
.slice:nth-child(3) { 
 
    transform: rotate(180deg) skewY(30deg) scale(1.2); 
 
} 
 
.slice:nth-child(3) .slice-contents { 
 
    transform: skewY(-30deg); /* unskew slice contents */ 
 
    background: orange; 
 
} 
 
.inner-pie { 
 
    position: absolute; 
 
    width: 3em; 
 
    height: 3em; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    border-radius: 50%; 
 
    border: 4px solid black; 
 
    background: white; 
 
}

<ul class='pie'> 
 
    <li class='slice'> 
 
    <div class='slice-contents'>click 1</div> 
 
    </li> 
 
    <li class='slice'> 
 
    <div class='slice-contents'>click 2</div> 
 
    </li> 
 
    <li class='slice'> 
 
    <div class='slice-contents'>click 3</div> 
 
    </li> 
 
    <li class='inner-pie'> 
 
    </li> 
 
<ul>