如何制作带有边框半径的切角？

Question

我已经有了一种解决方案，如下所示。但在 Safari 中，看起来没有 margin-right: -5px;。是否有其他方法来完成此任务或修复现有的解决方案。

HTML

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

CSS

.card {
    width: 243px;
    height: 400px;

    display: flex;
    flex-direction: column;
    background-color: gray;
    border: 1px solid black;
    border-radius: 8px 0px 8px 8px;
}

&::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;
}

预期结果如下所示

Answer 1

clip-path 与渐变相结合可以做到这一点：

.box {
  --b: 5px; /* border */
  --s: 50px; /* size of the cut */
  --c: red;
  
  width: 300px;
  height: 200px;
  
  border: var(--b) solid var(--c);
  border-radius: 20px;
  clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% var(--s),100% 100%,0 100%);
  background: linear-gradient(-135deg,var(--c) calc(0.707*var(--s) + var(--b)),#0000 0) border-box;
  background-color: grey;
  
}

<div class="box"></div>

Answer 2

您可以使用 CSS clip-path 属性：

clip-path: polygon(0 0, 80% 0%, 100% 20%, 100% 100%, 0 100%);

我推荐 Clippy 生成器：https://bennettfeely.com/clippy/

整体代码：

.card {
    width: 243px;
    height: 400px;
    display: flex;
    flex-direction: column;
    background-color: gray;
    border-radius: 5px;
    clip-path: polygon(0 0, 80% 0%, 100% 20%, 100% 100%, 0 100%);
}

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