css实现带边框的冒泡提示框

本是古典何须时尚 2021-10-29 06:44 225阅读 0赞

![1019621-20190605173805396-269949678.png][]  
需求是实现这种效果，  
因为内容是动态的，使用图片不是很好:  
原因：  
如果内容确定只是一行，可以效果图裁剪3部分，分别是两侧和中间部分，然后用backgroud插入三张图片，但是要是内容是2行就不好处理了。  
所以尝试用css画效果，  
![1019621-20190605174339684-384641478.png][]  
完成后的效果图  
实现原理就是，图像拼接，  
主体一部分，右边那个角是一部分，然后主体需要一个容器遮挡住右边多余部分，  
示意图:  
![1019621-20190605174640274-117029832.png][]

上代码:

.panle-item-tags {
            z-index: 100;
            width: 100px;
            height: 40px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            // left: -140px;
            left: 40px;
            font-size: 16px;
            color: #fff;
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(156, 255, 55, 1);
            border: 2px solid rgba(119, 215, 20, 1);
            border-radius: 4px;
    
            &::before {
                content: '';
                position: absolute;
                right: -7px;
                bottom: 10px;
                background: rgba(156, 255, 55, 1);
                border: 2px solid rgba(119, 215, 20, 1);
                width: 16px;
                height: 16px;
                border-radius: 4px;
                transform: rotate(45deg);
                z-index: 1;
            }
    
            &::after {
                content: '';
                position: absolute;
                top 2px;
                left 2px;
                right 0px;
                bottom 2px;
                background: rgba(156, 255, 55, 1);
                border-radius: 4px;
                z-index: 2;
            }
        }

转载于:https://www.cnblogs.com/aloneCode/p/10981018.html

[1019621-20190605173805396-269949678.png]: /images/20211029/2d34c50826e94d98a323beb775d7706d.png
[1019621-20190605174339684-384641478.png]: /images/20211029/4fb220cb43824a8c909a4feb3e347162.png
[1019621-20190605174640274-117029832.png]: /images/20211029/bc46c81a718941a38fb5eaad2c4a4600.png