模拟气泡样式

搲社会主义墙角 / 2023-08-24 / 原文

.bubble {
                            right: 0;
                            top: 45px;
                            position: absolute;
                            padding: 0 12px;
                            font-size: 14px;
                            height: 30px;
                            line-height: 30px;
                            color: $color-FF482D;
                            background: #FFF3F3;
                            border: 1px solid #FFB8AE;
                            border-radius: 5px;
                            white-space: nowrap;
                            font-weight: normal;
                        }

                        .bubble::before,
                        .bubble::after {
                            position: absolute;
                            top: -13px;
                            right: 35px;
                            display: block;
                            font-size: 0;
                            line-height: 0;
                            border-color: transparent transparent #FFB8AE;
                            border-style: solid;
                            border-width: 6px;
                            content: "";
                            width: 0;
                        }

                        .bubble::after {
                            top: -12px;
                            border-color: transparent transparent #FFF3F3;
                        }