怎样用CSS做出这个效果？

Question

或者用什么方法比较简单呢 用svg图标但是中间放不了文字

Answer 1

偷懒的办法就是让ui把那个对话框的图片切给你，不偷懒的话就自己用div模拟一下就行，div+三角形+定位就可以了

Answer 2

利用三角形就可以了！

.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;

        }