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

新手上路，请多包涵

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

javascript css html

阅读 3.6k

3 个回答

       #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);
        }