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

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

JavaScript Html5

MMMHUHU 2018-08-23 20:22:54

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

查看完整描述

1 回答

慕虎7371278

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超4個贊

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

反對回復(fù) 2018-08-26