CSS　三角形　リンク飛ばしたい

cssで長方形を４つの三角で分割した背景画像を作りました。
そこで質問なのですが、やりたこととしては、その三角形を押したら<a href="">でリンク先に飛ばしたいと考えているのですが、なかなかいい方法が思いつきません。
<a href="">を width="100%" height="100%"　にしたのですが、<a href="">はposition:fixed;の画面全体が対象になっているので、ダメでした。

HTML
1<main class="root">
2 <div class="stage">
3  <div class="a"></div>
4  <div class="b"></div>
5  <div class="c"></div> 
6  <div class="d"></div>
7 </div>
8</main>

CSS
1.root{
2 position:fixed;
3 top:0; left:0;  
4 width:100%; height:100%;
5}
6.stage{
7 position:absolute;
8 top:0; left:0;
9 width:100%; height:100%;
10}
11.a, .b, .c, .d{
12    position: fixed;
13    top: 0; left: 0;
14    width: 100%; height: 100%;
15    /* opacity: 0; */
16}
17.a{
18    border-top: 50vh solid #BACDB0;
19    border-right: 50vw solid transparent;
20    border-bottom: 50vh solid transparent;
21    border-left:  50vw solid transparent;
22    animation: fadeShow 1s linear 1s forwards;
23}
24.b{
25    border-top: 50vh solid transparent;
26    border-right: 50vw solid #C2B8B2;
27    border-bottom: 50vh solid transparent;
28    border-left:  50vw solid transparent;
29    animation: fadeShow 1s linear 1.5s forwards;
30}
31.c{
32    border-top: 50vh solid transparent;
33    border-right: 50vw solid transparent;
34    border-bottom: 50vh solid #6C5A49;
35    border-left:  50vw solid transparent;
36    animation: fadeShow 1s linear 2s forwards;
37}
38.d{
39    border-top: 50vh solid transparent;
40    border-right: 50vw solid transparent;
41    border-bottom: 50vh solid transparent;
42    border-left:  50vw solid #30343F;
43    animation: fadeShow 1s linear 2.5s forwards;
44}

m.ts10806

2019/03/19 07:54

html もご提示ください。

行動規範の内容に同意します

回答2件

clip-path で。IE/Edge は未対応です。

CSS
1.a a, .b a, .c a, .d a {
2  display: block;
3  width: 100%;
4  height: 100%;
5}
6
7.a {
8  clip-path: polygon(0% 0%, 50% 50%, 100% 0%);
9  background: #BACDB0;
10}
11
12.b {
13  clip-path: polygon(50% 50%, 100% 100%, 100% 0%);
14  background: #C2B8B2;
15}
16
17.c {
18  clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
19  background: #6C5A49;
20}
21
22.d {
23  clip-path: polygon(0% 0%, 0% 100%, 50% 50%);
24  background: #30343F;
25}