前端如何实现这种不规则的三角形？

Question

如图所示各个城市的这种不规则提示框该怎么实现呢？每个城市直接贴图片的话有些城市会点击不到，因为太密集了。

Answer 1

      #talkbubble {           width: 120px;           height: 46px;           background: red;           position: relative;           border : 5px solid red;           border-radius : 5px;           margin: 30px 0 0 200px;           color: #fff;           display: flex;           justify-content: center;           align-items: center;         }        #talkbubble:before {           content:"";           position: absolute;           right: 100%;           top: 24px;           width: 0;           height: 0;           border-top: 16px solid transparent;           border-right: 100px solid red;           transform:rotate(-10deg);         }