鍍金池/ 問答/HTML/ 前端如何實(shí)現(xiàn)這種不規(guī)則的三角形？

前端如何實(shí)現(xiàn)這種不規(guī)則的三角形？

clipboard.png

如圖所示各個(gè)城市的這種不規(guī)則提示框該怎么實(shí)現(xiàn)呢？每個(gè)城市直接貼圖片的話有些城市會(huì)點(diǎn)擊不到，因?yàn)樘芗恕?/p>

回答
編輯回答
怣痛

【圖形】CSS繪制提示框

       #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);
        }
2018年7月9日 06:06
編輯回答
菊外人

提示框鏈接描述
具體整個(gè)功能如何實(shí)現(xiàn)就不是很清楚要使用什么方式

2018年1月15日 14:53
編輯回答
情未了

用的是SVG/VML/canvas
拉斐爾JS會(huì)圖庫
http://www.raphaeljs.com/
D3JS
https://d3js.org/

2018年4月27日 02:16