CSS3实现透明的气泡框

CSS3实现的气泡框，在有白色背景的情况下，采用border方案即可，但是如果背景要求是半透明，或者带有边框，如何实现呢？ 先看如下效果：

 大致思路：

        1：先设置容器背景色，在使用伪类before设置边框，并使用clip-path进行裁剪；

        2：使用after画出小三角，设置边框和背景色，裁剪后再旋转，因为需要保留两条边框不被裁剪掉；

.box {
    padding: 5px;
    background-color: rgba(40, 140, 115, 0.1);
}

.box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 3px;
    border: 1px solid rgba(40, 140, 115, 0.3);
    clip-path: polygon(calc(50% - 7px) 0, 50% 5px, calc(50% + 7px) 0, 100% 0, 100% 100%, 0 100%, 0 0);
}

.box::after {
    content: "";
    position: absolute;
    top: -5px;
    left: calc(50% - 5px);
    width: 8px;
    height: 8px;
    transform: rotate(135deg);
    border: 1px solid rgba(40, 140, 115, 0.3);
    background-color: rgba(40, 140, 115, 0.1);
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}