如何用border-radius实现切角效果？Safari兼容问题求助

问题描述 #

我通过以下代码实现卡片右上角的切角效果，但在Safari浏览器中margin-right: -5px属性未生效，无法达到预期的右上角斜切角效果。

现有HTML代码 #

<div class="card">
   Title text
</div>

现有CSS代码（基于Sass预处理器） #

.card {
    width: 243px;
    height: 400px;
    display: flex;
    flex-direction: column;
    background-color: gray;
    border: 1px solid black;
    border-radius: 8px 0px 8px 8px;
}

.card::before {
    border-right: 1px solid black;
    width: 30px;
    height: 55px;
    margin-top: -22px;
    margin-right: -5px;
    content: '';
    position: absolute;
    align-self: flex-end;
    transform: rotate(130deg);
    background: gray;
}

预期效果：卡片右上角呈现斜切缺口，同时保留完整的边框样式。

兼容修复方案（针对现有代码） #

1. 修复定位逻辑 #

Safari对绝对定位元素的margin-right处理存在兼容性偏差，改用right属性定位更可靠；同时必须给父元素.card添加position: relative，确保伪元素相对于父元素而非视口定位：

.card {
    width: 243px;
    height: 400px;
    display: flex;
    flex-direction: column;
    background-color: gray;
    border: 1px solid black;
    border-radius: 8px 0px 8px 8px;
    position: relative; /* 添加相对定位，让伪元素以此为参照 */
}

.card::before {
    border-right: 1px solid black;
    width: 30px;
    height: 55px;
    margin-top: -22px;
    right: -5px; /* 替换margin-right，直接设置右侧定位 */
    content: '';
    position: absolute;
    top: 0; /* 明确顶部定位，替代align-self */
    transform: rotate(130deg);
    background: gray;
}

2. 优化旋转原点（可选） #

如果切角位置仍有偏移，可通过transform-origin调整旋转中心点，让切角更精准：

.card::before {
    /* 其他属性保持不变 */
    transform-origin: bottom right; /* 设置旋转原点为伪元素右下角 */
    transform: rotate(45deg); /* 根据需求微调角度，优化切角形态 */
}

更简洁的替代方案：使用clip-path #

如果不想依赖伪元素，可使用clip-path实现切角，兼容性覆盖Safari 10.1+，代码更简洁：

.card {
    width: 243px;
    height: 400px;
    display: flex;
    flex-direction: column;
    background-color: gray;
    border-radius: 8px;
    /* 用polygon定义切角路径，右上角切掉30px的三角形区域 */
    clip-path: polygon(
        0 0, 
        calc(100% - 30px) 0, 
        100% 30px, 
        100% 100%, 
        0 100%
    );
    /* 解决原生border被clip-path裁切的问题，用内阴影模拟边框 */
    box-shadow: inset 0 0 0 1px black;
}

注意：原生border会被clip-path裁切，因此用box-shadow: inset模拟边框，效果与原方案一致。

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