How to achieve this irregular triangle at the front end?

clipboard.png

how to implement this irregular prompt box for each city as shown in the figure ? if you post a picture directly in each city, some cities will not be able to click on it because it is too dense.

Apr.11,2021

[Graphics] CSS drawing prompt box

       -sharptalkbubble {
           width: 120px;
           height: 46px;
           background: red;
           position: relative;
           border : 5px solid red;
           border-radius : 5px;
           margin: 30px 0 0 200px;
           color: -sharpfff;
           display: flex;
           justify-content: center;
           align-items: center;
        }
        -sharptalkbubble: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);
        }

uses SVG/VML/canvas
Rafael JS gallery
http://www.raphaeljs.com/
D3JS
https://d3js.org/


prompt box link description
It is not clear how to implement the whole function in what way to use

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3ab40-2c22f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3ab40-2c22f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?