How to create a speech bubble in which the arrow, or pointer, is part of the element, but the borders that make it are not?

Question

const profile = document.querySelector('#profile');
let timeDelay = "";

profile.addEventListener('mouseover', function() { 
    if(this.children.length != 0) { 
        clearTimeout(timeDelay);
        return;
    }
   const onHover = document.createElement('div');
   onHover.setAttribute('id', 'miniProfile');
   this.append(onHover)
   setTimeout(()=> {
       onHover.style.top = '120%';
       onHover.style.transition = '0.5s'
       onHover.style.transitionTimingFunction = 'ease'
   }, 10)
  
    const forArrowLeft = document.createElement('div');
    const forArrowRight = document.createElement('div');
    forArrowLeft.setAttribute('id', 'forArrowLeft')
    forArrowRight.setAttribute('id', 'forArrowRight')
    onHover.append(forArrowLeft)
    onHover.append(forArrowRight)

    forArrowRight.addEventListener('mouseover', function(e) {
        this.style.cursor = 'default'
        e.stopPropagation() 
        e.preventDefault()
    })
    forArrowLeft.addEventListener('mouseover', function(e) { 
        this.style.cursor = 'default'
        e.stopPropagation()
        e.preventDefault()
    })
    forArrowRight.addEventListener('mouseout', function(e) {
        e.stopPropagation() 
    })
    forArrowLeft.addEventListener('mouseout', function(e) { 
        e.stopPropagation()
    })

    onHover.addEventListener('mouseover', function(e) { 
       clearTimeout(timeDelay)
       e.stopPropagation()
    })

})

profile.addEventListener('mouseout', function(e) { 
    if(e.relatedTarget.id.toLowerCase() != this.children[0].id.toLowerCase()) {
        timeDelay = setTimeout(()=> {
            this.children[0].remove();   
        }, 500)      
    } 
})

#profile { 
    position: relative;
    display: inline-block;
    margin-left:100px;
    margin-top:50px;
    color: black;
}
 
#miniProfile { 
    width: 300px;
    height: 200px;
    position: absolute;
    top: 170%;
    border-radius: 5px;
    background-image: url("https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg");
    background-size: cover;
}

#forArrowLeft { 
    position:absolute;
    height: 0;
    border-right: none;
    border-bottom: none;
    border-top: 15px solid white;
    border-right: 10px solid transparent;
    left:0;
    width: 30px;
}

#forArrowRight {
    position: absolute;
    height: 0;
    right: 0;
    left: 30px;
    border-right: none;
    border-bottom: none;
    border-top: 15px solid white;
    border-left: 10px solid transparent;
}

<a id="profile" href="">My Profile</a>

What I wanna do is to make the arrow or pointer be part of the image itself in the sense that you can click on it, but the two elements, or borders that constructed the arrow to not be part of the element.

Previously I used pseudo-elements after and before to construct the pointer, but the rest of the two elements were still part of the image, even if you make them transparent, they're still there.

So, to solve that issue, I thought I have to stop the propagation of these pseudo-elements that create the pointer in order to separate it from the image, and for that reason, I had to opt for creating new elements and appending them instead of using the pseudo-elements. As you can see in the above example, the two appended elements that construct the pointer are in fact now separate from the image, or at least that's the effect, but now the issue is that, the pointer itself is also separate, and I want it to be part of the image. I want the pointer to be considered part of the image, child of the image element, but not the rest of the two elements forArrowLeft and forArrowRIght that constructed the pointed.

Is that even possible? If not, how can this be achieved? I saw this effect on Wikipedia, and I want to replicate it. You can just hover over any hyperlink in Wiki, and you'll see what I want to do.

Hopefully you understand what I mean. If you don't feel free to ask me for clarification.

Answer 1

clip-path using a polygon would keep the arrow part within the clickable area.

Here's a very simple example. Obviously the values can be changed to make the exact shape required:

.bubble {
  width: 90vmin;
  height: 40vmin;
  background-color: blue;
  clip-path: polygon(0 5%, 10% 5%, 15% 0, 20% 5%, 100% 5%, 100% 100%, 0 100% );
}

<div class="bubble"></div>