Придание элементам другой структуры, а не прямоугольника, например треугольника

Question

У меня есть коробка с 3 треугольниками внутри.Эти 3 треугольника должны быть ссылкой, но они являются кликабельными прямоугольниками, а не треугольниками, поэтому при нажатии на одно изображение зависит, какая ссылка является пунктом назначения.

Если щелкнуть левое изображение, пунктом назначения должна быть ссылка.1, но это ссылка 3 из-за рамки снизу рис.

Расположение элементов хорошее.Но ссылка должна быть такого же размера, как изображения, а не просто коробка с одинаковой шириной и высотой.Я пробовал переполнение: скрытый и z-index, но это не сработало.

<style>
#card{
  width:472px;
  height:472px;
  display:grid;
  grid-template-columns:50% 50%;
}
#l3{
  position:relative;
  bottom:149px;
}
</style>

<div id="card">
    <a href="link1.html" >
      <img src="img/left.png">
    </a>
    <a href="link2.html">
      <img src="img/right.png">
    </a>
    <a href="link3.html" id="l3">
      <img src="img/bottom.png">
    </a>
</div>

Я хочу, чтобы якорная ссылка была такого же размера, как изображение.Или изображение представляет собой настоящий треугольник, а не прямоугольник.

Спасибо, и если у вас есть вопросы, не стесняйтесь спрашивать.

Снимок экрана карты: https://www.directupload.net/file/d/5488/ap538p4i_png.htm

Answer 1

Вы можете сделать это clip-path, если хотите ограничить события мыши только видимой областью:

.box {
  width:200px;
  height:250px;
  position:relative;
}
.box > a {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-size:cover;
  background-position:center;
}

.box > a:nth-child(1) {
    -webkit-clip-path:polygon(0 0,50% 0, 50% 50%, 0 70%);
    clip-path:polygon(0 0,50% 0, 50% 50%, 0 70%);
}
.box > a:nth-child(2) {
    -webkit-clip-path:polygon(100% 0,50% 0, 50% 50%, 100% 70%);
    clip-path:polygon(100% 0,50% 0, 50% 50%, 100% 70%);
}

.box > a:nth-child(3) {
    -webkit-clip-path:polygon(0 100%,0 70%, 50% 50%, 100% 70%,100% 100%);
    clip-path:polygon(0 100%,0 70%, 50% 50%, 100% 70%,100% 100%);
}
.box > a:hover {
   filter:grayscale(100%);
}

<div class="box">
  <a href="#" style="background-image:url(https://picsum.photos/id/1/800/400)" ></a>
  <a href="#" style="background-image:url(https://picsum.photos/id/10/800/400)" ></a>
  <a href="#" style="background-image:url(https://picsum.photos/id/13/800/400)"></a>
</div>

Упрощенная версия, где вам нужен путь клипа только с одним элементом:

.box {
  width:200px;
  height:250px;
  position:relative;
}
.box > a {
  position:absolute;
  background-size:cover;
  background-position:center;
}

.box > a:nth-child(1) {
  top:0;
  left:0;
  right:50%;
  bottom:30%;
}
.box > a:nth-child(2) {
   top:0;
  right:0;
  left:50%;
  bottom:30%;
}

.box > a:nth-child(3) {
  top:50%;
  left:0;
  right:0;
  bottom:0;
  clip-path:polygon(0 100%,0 30%, 50% 0%, 100% 30%,100% 100%);
}
.box > a:hover {
   filter:grayscale(100%);
}

<div class="box">
  <a href="#" style="background-image:url(https://picsum.photos/id/1/800/400)" ></a>
  <a href="#" style="background-image:url(https://picsum.photos/id/10/800/400)" ></a>
  <a href="#" style="background-image:url(https://picsum.photos/id/13/800/400)"></a>
</div>

Еще одна идея без клипа:

.box {
  width:200px;
  height:250px;
  position:relative;
  z-index:0;
  overflow:hidden;
}
.box > a {
  position:absolute;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}

.box > a:nth-child(1) {
  top:0;
  left:0;
  right:50%;
  bottom:30%;
  background-size:0;    
  transform: skewY(-20deg);
  transform-origin: left;
}
.box > a:nth-child(2) {
  top:0;
  right:0;
  left:50%;
  bottom:30%;
  background-size:0;
  transform: skewY(20deg);
  transform-origin: right;
}

.box > a:nth-child(1):before,
.box > a:nth-child(2):before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image:inherit;
  background-size:cover;
  background-position:inherit;
  transform-origin: inherit;
}
.box > a:nth-child(1):before {
  transform: skewY(20deg);
}

.box > a:nth-child(2):before {
  transform: skewY(-20deg);
}

.box > a:nth-child(3) {
  top:50%;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
}
.box > a:hover {
   filter:grayscale(100%);
}

<div class="box">
  <a href="#" style="background-image:url(https://picsum.photos/id/1/800/400)" ></a>
  <a href="#" style="background-image:url(https://picsum.photos/id/10/800/400)" ></a>
  <a href="#" style="background-image:url(https://picsum.photos/id/13/800/400)"></a>
</div>

Answer 2

Я считаю, что проблема заключается в том, что ваши ссылки не установлены на

a {
  display:block;
}

Вот скрипка с двумя делителями, завернутыми в теги.У одной из них есть ссылка для отображения блока, у другой - нет.https://jsfiddle.net/L6w3n28u/1/

Используйте элемент inspect, и вы увидите, что установленный для отображения блок полностью покрывает область, которую занимает div внутри него (в вашем случае это будет ваше изображение треугольника).