CSS实现圆角的三角形

碰到需求要实现一个聊天框的倒三角，但是三角形是有一个圆角的，记录一下CSS的实现方法。三个角都是圆角三角形的实现方法类似。

需求：

.rounded-triangle {
    width: 20px;
    height: 20px;
    border-bottom-left-radius: 6px;
    background-color: #333;
    transform: rotate(-60deg) skewX(-30deg) scale(1, .866);
    &::before, &::after {
        content: "";
        position: absolute;
        background-color: inherit;
        width: 20px;
        height: 20px;
    }
    &::before {
        transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(-50%, 0);
    }
    &::after {
        transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0%, 50%);
    }
}
复制代码

实现效果：

三个角都是圆角三角形的实现方法类似。

.rounded-triangle {
    width: 20px;
    height: 20px;
    border-bottom-left-radius: 6px;
    background-color: #333;
    transform: rotate(-60deg) skewX(-30deg) scale(1, .866);
    &::before, &::after {
        content: "";
        position: absolute;
        background-color: inherit;
        width: 20px;
        height: 20px;
        border-bottom-left-radius: 6px;
    }
    &::before {
        transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(-50%, 0);
    }
    &::after {
        transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0%, 50%);
    }
}
复制代码