CSS带三角汽泡框在线生成

预览效果

.bubble {

    position: relative;

    width: 200px;

    height: 100px;

    background: #ffffff;

    border: 2px solid #dc2626;

    border-radius: 6px;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

}



.bubble::after {

    content: '';

    position: absolute;

    left: 50%;

    bottom: -10px;

    transform: translateX(-50%);

    border-width: 10px 10px 0;

    border-style: solid;

    border-color: #dc2626 transparent transparent;

}