鍍金池/ 問答/HTML5  HTML/ 怎樣用CSS做出這個效果？

怎樣用CSS做出這個效果？

或者用什么方法比較簡單呢 用svg圖標(biāo)但是中間放不了文字
圖片描述

回答
編輯回答
夢囈

三十客-利用三角形實現(xiàn)類對話框

利用三角形就可以了！

.bubble {
            position: relative;
            padding: 8px 16px;
            background: #f7f7f7;
            border: 1px solid #ccc;
        }
        .bubble:before {
            content: '';
            position: absolute;
            display: block;
            bottom : -10.5px;
            right: 0;
            width: 0;
            height: 0;
            border-top: 12px solid #f7f7f7;
            border-left: 12px solid transparent;
            z-index: 10;
        }
        .bubble:after {
            content: '';
            position: absolute;
            display: block;
            bottom : -13px;
            right: -1px;
            width: 0;
            height: 0;
            border-top: 13px solid #ccc;
            border-left: 13px solid transparent;
        }
2017年11月13日 21:00
編輯回答
夢囈

偷懶的辦法就是讓ui把那個對話框的圖片切給你，不偷懶的話就自己用div模擬一下就行，div+三角形+定位就可以了

2017年1月7日 17:21
編輯回答
失魂人

直接div + div:after 就可以了

2017年11月6日 02:31