如何用Clip-path实现带圆角、背景图及底部三角的元素？

方案一：使用clip-path: path()实现完整带圆角的形状 #

polygon()只能定义直线段，无法直接实现圆角效果，但可以用path()函数编写包含圆弧（圆角）和直线（底部三角）的SVG路径，让背景图完整适配整个形状。

代码示例：

.service_item{
    min-height: 300px;
    max-width: 300px;
    --border-radius-card: 10px; /* 自定义圆角大小 */
    background-image:url('https://images6.alphacoders.com/321/thumb-1920-321927.jpg');
    background-size: cover;
    background-position: center;
    /* 路径包含顶部圆角和底部三角 */
    clip-path: path('M var(--border-radius-card), 0 L calc(100% - var(--border-radius-card)), 0 A var(--border-radius-card), var(--border-radius-card) 0 0 1 100%, var(--border-radius-card) L 100%, calc(100% - 20px) L 40%, calc(100% - 20px) L 30%, 100% L 20%, calc(100% - 20px) L 0, calc(100% - 20px) L 0, var(--border-radius-card) A var(--border-radius-card), var(--border-radius-card) 0 0 1 var(--border-radius-card), 0 Z');
}

路径说明：

• 开头和结尾的A指令用于绘制顶部左右两个圆角；
• 中间的L指令定义底部三角的直线段，和你之前polygon()的坐标逻辑一致；
• 通过CSS变量--border-radius-card统一控制圆角大小，便于调整。

方案二：伪元素+背景继承修复背景延伸问题 #

针对你最初用伪元素遇到的背景不连续问题，可以让伪元素继承主元素的背景属性，再裁剪成三角形状，实现背景无缝衔接。

代码示例：

.service_item{
    min-height: 300px;
    max-width: 300px;
    --border-radius-card: 10px;
    border-radius: var(--border-radius-card) var(--border-radius-card) 0 0; /* 仅设置顶部圆角 */
    background-image:url('https://images6.alphacoders.com/321/thumb-1920-321927.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: visible; /* 允许伪元素超出主元素范围 */
}

.service_item::after{
    content: '';
    position: absolute;
    bottom: -20px; /* 三角高度，和你之前的20px对应 */
    left: 20%; /* 三角水平位置，对应你之前的20%坐标 */
    width: 20px; /* 三角宽度（左右各10px） */
    height: 20px;
    /* 继承主元素背景属性，保证背景对齐 */
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    /* 裁剪成三角形状 */
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateY(-1px); /* 消除主元素和伪元素的细微缝隙 */
}

优势：兼容性更好，且可单独调整三角的位置、大小，若后续需要给三角加边框等样式也更灵活。

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