如何用CSS border-image实现切角方形的等宽边框？

问题描述 #

想要为切角方形添加0.1rem的全等宽边框，使用CSS border-image实现时，切角处的边框宽度比其余部分略窄，无法达到全边框等宽的效果。原代码如下：

.news-card {
    position: relative;
    padding: 1em;
    height:41rem;
    width: 30rem;
    
    clip-path: polygon(100% 0, 100% 85%, 80% 100%, 0 100%, 0 0);

    border-image: fill 0
    conic-gradient(grey 0 0);

    &::before {
        position: absolute;
        z-index: -1;

        content: "";
        inset-block: 0.1rem;
        inset-inline: 0;
        clip-path: polygon(100% 0, 100% 85%, 80% 100%, 0 100%, 0 0);
        
        border-image: fill 0/0.1rem/0.1rem 0
        conic-gradient(white 0 0);
    }
}

解决方案 #

border-image在处理自定义clip-path的切角时，容易出现边框宽度不一致的问题，推荐改用伪元素+精准clip-path路径的方式实现全等宽边框：

.news-card {
    position: relative;
    padding: 1em;
    height: 41rem;
    width: 30rem;
    /* 主容器负责裁剪内容显示区域 */
    clip-path: polygon(100% 0, 100% 85%, 80% 100%, 0 100%, 0 0);
}

.news-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    /* 设置统一宽度的边框 */
    border: 0.1rem solid grey;
    /* 伪元素使用偏移后的clip-path，保证切角处边框完整 */
    clip-path: polygon(
        100% 0, 
        100% calc(85% - 0.1rem), 
        calc(80% - 0.1rem) 100%, 
        0 100%, 
        0 0,
        /* 补充路径点，让切角处边框闭合且宽度一致 */
        100% 0,
        100% 85%,
        80% 100%,
        0 100%
    );
}

原理说明 #

1. 主容器的clip-path仅负责裁剪内容区域，伪元素作为边框的载体。
2. 伪元素的clip-path在原路径基础上，对切角的两个顶点做了与边框宽度一致的偏移（0.1rem），同时补充路径点让边框在切角处完整闭合，避免出现宽度收缩。
3. 直接使用border属性替代border-image，确保全边框宽度统一，无需复杂的渐变填充逻辑。

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