clickable link point to wrong url when two div intersect

Question

Here is my html code:

   <div class="team-items">
                    <div class="col-md-2">
                      <div class="team-container wow1 bounceIn" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.4s; animation-name: bounceIn;">
                        <div class="team-item">
                          <a href="/embedded-product">
                            <div class="team-triangle top-left-product">
                              <div class="content">
                                <img src="/sites/all/themes/smart_sinepulse/img/products/1.png" alt="title">
                                <div class="team-hover text-center">
                                  <i class="fa "></i>
                                  <p>Embedded Products</p>
                                </div>
                              </div>
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-2">
                      <div class="team-container wow1 bounceIn" data-wow-delay="0.3s" style="visibility: visible; animation-delay: 0.4s; animation-name: bounceIn;">
                        <div class="team-item">
                          <a href="/rf-hardware">
                            <div class="team-triangle top-middle-product">
                              <div class="content">
                                <img src="/sites/all/themes/smart_sinepulse/img/products/1.png" alt="title">
                                <div class="team-hover text-center">
                                  <i class="fa "></i>
                                  <p>RF Hardware</p>
                                </div>
                              </div>
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-2">
                      <div class="team-container wow1 bounceIn" data-wow-delay="0.4s">
                        <div class="team-item">
                          <a href="/software-products">
                            <div class="team-triangle top-right-product">
                              <div class="content">
                                <img src="/sites/all/themes/smart_sinepulse/img/products/1.png" alt="title">
                                <div class="team-hover text-center">
                                  <i class="fa "></i>
                                  <p>Software</p>
                                </div>
                              </div>
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-2">
                      <div class="team-container wow1 bounceIn" data-wow-delay="0.6s">
                        <div class="team-item">
                          <a href="/ios-applications">
                            <div class="team-triangle bottom-left-product">
                              <div class="content">
                                <img src="/sites/all/themes/smart_sinepulse/img/products/2.png" alt="title">
                                <div class="team-hover text-center">
                                  <i class="fa"></i>
                                  <p>iOS Application</p>
                                </div>
                              </div>
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-2">
                      <div class="team-container wow1 bounceIn" data-wow-delay="0.6s">
                        <div class="team-item">
                          <a href="http://www.sinepulse.com/sites/default/files/products/smart-products-catalogue.pdf">
                            <div class="team-triangle bottom-right-product">
                              <div class="content">
                                <img src="/sites/all/themes/smart_sinepulse/img/products/2.png" alt="title">
                                <div class="team-hover text-center">
                                  <i class="fa"></i>
                                  <p>Smart Product Catalogue</p>
                                </div>
                              </div>
                            </div>
                          </a>
                        </div>
                      </div>
</div> <!-- END team-items -->

the output of this simple html is:

The rectangle box of yellow color is the output of <div class="col-md-2"> Every square box is the image[i.e: <img src="/sites/all/themes/smart_sinepulse/img/products/2.png" alt="title">] Every image is clickable and refers a link. tag is inside <div class="col-md-2">. Everything is working perfectly except '1', '2', '3', '4' intersected area indicated by red arrow. area 1 should point link of embedded product but it is pointing IOS Application. I suspect it is due to the clickable area is defined by <div class="col-md-2">. In this situation how can I resolve it. Thanks in advance.

Answer 1

You could use clip path

div{
  width:200px; height:200px;
  background-color:FireBrick ;
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

a {
  width:100%;
  height:100%;
  color:white; text-decoration:none;
  display:flex; align-items:center; justify-content:center;
}

<div>
  <a href="#2">something</a>
</div>

But that won't work on IE or Edge, amongst others.

An alternative would be to transform:rotate the container, then resetting the text node to the normal rotation.

div{
  width:200px; height:200px;
  margin:3em;
  background-color:FireBrick ;
  transform:rotate(45deg);
}

a {
  width:100%;
  height:100%;
  color:white; text-decoration:none;
  display:flex; align-items:center; justify-content:center;
}

p{
  transform:rotate(-45deg)
}

<div>
  <a href="#1">
    <p>something</p>
  </a>
</div>

It would take a complete restructure, but you really shouldn't be using images for those shapes anyway, for performance and bandwidth issues.

Answer 2

it is because the divs are rectangular, you can crop the dives to change their shapes. it can be done by using different methods but the easiest way is using clip-path in css.

the syntax for clip-path is like this:

clip-path: polygon(x1 y1, x2 y2, x3 y3, .....);

in your case we can use clip-path for .bottom-left-product and .bottom-right-product divs. like this:

div.bottom-left-product, div.bottom-right-product{
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}

hope it solves your problem :)