cssで長方形を4つの三角で分割した背景画像を作りました。
そこで質問なのですが、やりたこととしては、その三角形を押したら<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}