How to make object react only when they touch the triangle itself in css?

Question

I am trying to create a game where I have a player jumping to avoid a triangle spike. It took me a lot of research, but I finally found a way in javascript to sense when the two touched.

My question is, the program keeps reacting as if the player has hit the spike when they hit the transparent left and/or right border. Is there a way to make it so that it will only react when the player hits the showing bottom border that makes up the actual triangle? Such as, is there a way to make the left and right borders not exist without compromising the style?

Here is my code:

Javascript:

//the function used to check whether the two elements are touching
areTouching = function(el1, el2) {
    el1.offsetBottom = el1.offsetTop + el1.offsetHeight;
    el1.offsetRight = el1.offsetLeft + el1.offsetWidth;
    el2.offsetBottom = el2.offsetTop + el2.offsetHeight;
    el2.offsetRight = el2.offsetLeft + el2.offsetWidth;

    return !((el1.offsetBottom < el2.offsetTop) ||
             (el1.offsetTop > el2.offsetBottom) ||
             (el1.offsetRight < el2.offsetLeft) ||
             (el1.offsetLeft > el2.offsetRight))
};

//Where the function is called
var player = document.getElementById('player');
var spike = document.getElementById('spike');
if (areTouching(spike, player) == true) {
        player.className = 'dead';
}

Css:

.spike {
    width: 0px;
    height: 0px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 30px solid darkgray;
    bottom: 0px;
    right: 0px;
    position: absolute;
}