三角形の<a>タグ範囲が互いに干渉しあってしまう

【実現したいこと】
オレンジで塗られた三角形をクリック　→　WEB予約画面に飛ぶ
白塗りの三角形をクリック　　　　　　→　電話をかける画面に飛ぶ

【現状】
<a>タグ要素の範囲が同じ高さで、横並びになっており、互いの三角形の範囲を侵食している。

【問題点・試したこと】
拡張したい部分の三角形を擬似要素で作成。それぞれの擬似要素にZ-indexを使用し、元々の<a>タグよりも手前(z方向)になるよう設定したが、赤色の三角形をクリックすると、電話予約画面に飛んでしまう。

【推定原因】
HTMLの構造として、
WEB予約　→　電話予約　の順に記載しているため、後から記載した電話予約側の要素が優先されてしまい、赤色三角形のリンク部分を侵食してしまっていると推定しています。
しかし、どのようにHTML構造から見直した方がいいのかがわからず、お力をお借りしたく、質問させて頂きました。
大変お手数おかけしますが、ご教示いただけますと幸いです。宜しくお願いします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>test</title>
7</head>
8
9<link rel="stylesheet" href="./css/style.css">
10
11<body>
12  <header class="header">
13    <div class="header_units web_position is-pc">
14      <div class="header_unit">
15        <a href="" class="header_ulink triangle triangle_right">
16          <img src="./img/header_web.png" alt="" class="header_ulink_web">
17        </a>
18        <a href="tel:000-0000-0000" class="header_ulink triangle_left">
19          <img src="./img/header_tel.png" alt="" class="header_ulink_tel">
20        </a>
21      </div>
22    </div>
23  </header>
24</body>

scss
1
2// color-lists
3$font_color: #343434;
4
5//font
6$font-family-default:  "Lato","游ゴシック体", "Yu Gothic", "yugothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", meiryo, "MS Pゴシック", "MS PGothic", sans-serif; // 標準フォント
7$font-family-english:  'Lato', sans-serif; // 英語フォント
8$font-family-japanease:'Noto Sans JP', sans-serif; // 日本語フォント
9$font-family-base: $font-family-japanease;
10$line-height-base: 1.6;
11
12//margin
13$margin-base: 8px;
14
15//common
16body{
17  overflow-x: hidden;
18  letter-spacing: 0.03em;
19  color: $font-color;
20  font-family: $font-family-default;
21  letter-spacing: 0.03;
22}
23
24img{
25  width: 100%;
26  height: 100%;
27}
28
29.header{
30  height: 96px;
31
32  &_units{
33    width: 100%;
34    max-width: 320px;
35    height: 100%;
36    margin-left: $margin-base * 4;
37  }
38
39  &_unit{
40    display: flex;
41    align-items: center;
42    height: 100%;
43    position: relative;
44
45
46    &::before{
47      content: '';
48      display: inline-block;
49      width: 100%;
50      height: 100%;
51      background-image: url(../img/header_web_bg.png);
52      background-repeat: no-repeat;
53      position: absolute;
54      top: 0;
55      left: 0;
56    }
57
58    &::after{
59      content: '';
60      display: inline-block;
61      width: 100%;
62      height: 100%;
63      background-image: url(../img/header_tel_bg.png);
64      background-repeat: no-repeat;
65      position: absolute;
66      top: 0;
67      left: 0;
68      z-index: -1;
69    }
70
71
72  }
73
74  &_ulink{
75    display: block;
76    height: 100%;
77    width: 100%;
78    z-index: 5;
79    position: relative;
80
81    &_web{
82      width: 101px;
83      height: 24px;
84      position: absolute;
85      bottom: 16px;
86      left: 16px;
87    }
88
89    &_tel{
90      width: 96px;
91      height: 24px;
92      position: absolute;
93      top: 16px;
94      right: 16px;
95    }
96  }
97}
98
99.triangle_left{
100  position: relative;
101
102  &::after{
103    content: '';
104    width: 0;
105    height: 0;
106    border-style: solid;
107    border-width: 46px 0 0 160px;
108    border-color: transparent transparent transparent #007bff;
109    transform: rotate(180deg);
110    position: absolute;
111    right: 100%;
112    top: 2px;
113    z-index: 11;
114  }
115}
116
117.triangle_right{
118  position: relative;
119
120  &::after{
121    content: '';
122    width: 0;
123    height: 0;
124    border-style: solid;
125    border-width: 46px 0 0 160px;
126    border-color: transparent transparent transparent red;
127    position: absolute;
128    left: 100%;
129    bottom: 0;
130    z-index: 11;
131  }
132}
133

【使用画像】

【使用環境】
vscode
Google chrome

【使用言語】
HTML
SCSS

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

回答1件

ベストアンサー

画像やborderで三角形を表示させても要素自体は四角形のままですのでその方法では無理です。

clip-pathを使って要素を三角形に切り抜いてください。

clip-path - CSS: カスケーディングスタイルシート | MDN

html
1<div class="header_unit">
2  <a href="#" class="header_ulink triangle_right">
3    <img src="./img/header_web.png"" alt="" class="header_ulink_web">
4  </a>
5  <a href="tel:000-0000-0000" class="header_ulink triangle_left">
6    <img src="./img/header_tel.png" alt="" class="header_ulink_tel">
7  </a>
8</div>

css
1.header_unit {
2  border: 2px solid orange;
3  width: 320px;
4  height: 96px;
5  position: relative;
6  box-sizing: border-box;
7}
8.header_ulink {
9  display: block;
10  width: 100%;
11  height: 100%;
12  position: absolute;  
13}
14.triangle_left {
15  clip-path: polygon(0 0, 100% 0, 100% 100%);
16}
17.triangle_right {
18  background-color: orange;
19  clip-path: polygon(0 0, 0 100%, 100% 100%);
20}