怎样用CSS做出这个效果？

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

css html

html5

阅读 2.4k

3 个回答

✓ 已被采纳

利用三角形就可以了！

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