三角形のdivをクリック可能にする

私は三角形の領域をクリック可能にしました。私が直面している問題は、これらの三角形の透明部分が重なっていることです。三角形の透明部分をクリッピングできないようにする方法はありますか？は、これは私が三角形三角形のdivをクリック可能にする

CSS作ってるんだかです：

.tri{ 
    width: 0; 
    height: 0; 
    border-left: 88px solid transparent; 
    border-right: 88px solid transparent; 
    border-top: 121px solid transparent; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
    z-index:10; 
    position:absolute; 
    text-align:center; 
    color: white; 
    font-size:15px; 
}

フィドル：https://jsfiddle.net/haba7x2g/2

出典

2016-10-27 Rohit Singh Chauhan

あなたのHTMLとJSまたはフィドルリンクを追加してください。 –

JSfiddleを作成して、私たちが問題を解決しやすくすることができます –

@Reddy質問の最後に既にJSfiddleがあります。 – eg16