使用 HTML 和 css 使整个形状可点击

Question

When I hover over the text, it is clickable. But I want to make the whole shape clickable. I tried but it's going outside the shape. How can we make the shape (only within the shape) clickable? Here's the code I tried. What should I do to make the whole shape clickable? Can anyone please help me with this?

 * { box-sizing: border-box; } .diamond { position: relative; height: 120px; width: 120px; text-align: center; z-index: 1; display: inline; float: right; font-family: Helvetica; color: #ffffff; FONT-SIZE: 13PX; FONT-WEIGHT: 600; } .diamond:after { position: absolute; background-color: #ef1717; top: 10px; left: 10px; content: ''; height: calc(100% - 22px); width: calc(100% - 22px); border-radius: 18%; transform: rotateX(45deg) rotateZ(45deg); z-index: -1; } #diamond:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } a.int_link{ text-decoration: none; COLOR: #FFFF; FONT-WEIGHT: 700; font-family: Helvetica; }

 <table style="width:99%;padding:5px;"> <tr> <td> <div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="diamond" id="diamond"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="meet" style="margin-top:45px;"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener">lorem...</a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a></div> </td> <td> <a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="diamond" id="diamond"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="meet" style="margin-top:45px;"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener">lorem..</a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a> </td> <td> <a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="diamond" id="diamond"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="meet" style="margin-top:45px;"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener">lorem..</a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a> </td> <td> <a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="diamond" id="diamond"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="meet" style="margin-top:45px;"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener">lorem..</a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a> </td> <td> <a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="diamond" id="diamond"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="meet" style="margin-top:45px;"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener">lorem..</a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a> </td> <td> <a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="diamond" id="diamond"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="meet" style="margin-top:45px;"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener">lorem..</a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a> </td> </tr></table>

Answer 1

I don't know if you would like this idea of mine

.changed{
  position: relative;
  height: 120px;
  width: 120px;
  text-align: center;
  z-index: 1;
      display: inline;
    float: right;
    font-family: Helvetica;
    color: #ffffff;
FONT-SIZE: 13PX;
    FONT-WEIGHT: 600;
}

.changed:after{
  position: absolute;
  background-color: green;
  top: 10px;
  left: 10px;
  content: '';
  height: calc(100% - 22px);  
  width: calc(100% - 22px); 
  border-radius: 18%;
  transform: rotateX(45deg) rotateZ(45deg);
  z-index: -1;

}

#changed:hover{

  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
   transform: scale(1.1);

}

        <td>
     
        <div class="changed" id="changed">
            <a href=" " class="int_link" target="_blank" rel="noreferrer noopener">
            <span style="display: block; position: relative; top: 1rem; left: 1rem; padding-top:32px; width: 87px; height: 81px;">Changed</span>
            </a>
        </div>
   
        </td>