使用clip-path时如何实现带圆角边缘的按钮

clip-path会严格按照定义的路径裁剪元素最终可见区域，你用的polygon()只能生成直线连接的多边形，本身不支持圆角定义。你给元素加的border-radius效果会落在裁剪区域外，直接被裁掉，自然不会显示。

方法1：直接用带曲线的clip-path路径（最简洁） #

把原来的直线多边形换成支持贝塞尔曲线的path()值，直接在裁剪路径里把圆角、斜切形状一次性画好，不需要额外嵌套元素，可以实现包括斜切交接处在内的所有边缘顺滑圆角：

.skew{
    border: none;
    background: none;
    outline: none;
    color: #fff;
    padding: 1rem 1.5rem;
    background-color: #ee128f;
    /* 路径中直接定义5px圆角+22px斜切角 */
    clip-path: path('M5 0 H100% Lcalc(100% - 22px) 100% H5 A5 5 0 0 1 0 calc(100% - 5px) V5 A5 5 0 0 1 5 0');
    margin: 1rem;
    padding-right:3rem ; 
}

方法2：双层元素嵌套实现（兼容性更好） #

如果需要兼容不支持path()百分比值的旧浏览器，可以拆成两层元素：外层负责做斜切裁剪，内层正常设置圆角和背景色：

<button class="skew-wrap">
    <span class="skew-inner">text</span>
</button>

.skew-wrap{
    border: none;
    background: transparent;
    outline: none;
    padding: 0;
    margin: 1rem;
    /* 外层只负责切出斜角形状 */
    clip-path: polygon(0 0, 100% 0%, calc(100% - 22px) 100%, 0% 100%);
}
.skew-inner{
    display: block;
    color: #fff;
    padding: 1rem 1.5rem;
    padding-right: 3rem;
    background-color: #ee128f;
    /* 内层正常加圆角 */
    border-radius: 5px;
}

注意：这个写法只能给非斜切的三个边加圆角，斜切边和其他边交接的角是直角，如果需要斜切位置也有圆角，优先用方法1。

内容的提问来源于stack exchange，提问作者Nora