使用 CSS border-image 创建一致的边框

Question

我正在尝试在一个正方形周围创建一个边框，并切掉一个角。

我尝试使用 border-image 创建这个，但在获得周围宽度为 0.1rem 的边框时遇到了一些困难。切角的边界似乎比其余边界要小一些。 有没有办法在对象周围创建相等的宽度？

这是CSS

.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);
    }
}

这是我的代码的链接 https://codepen.io/Shelas/pen/MWRvNdj

Answer 1

使用一个

clip-path

，您可以从我的生成器中获取值：https://css-generators.com/custom-corners/#4

.box {
  position: relative;
  height: 300px;
}
.box:before {
  content: "";
  position: absolute;
  inset: 0;
  background: red;
  clip-path: polygon(0 0,100% 0,100% calc(100% - 80px),calc(100% - 80px) 100%,0 100%,0 0,.1rem  .1rem ,.1rem calc(100% - .1rem),calc(100% - 80px - 0.04rem) calc(100% - .1rem),calc(100% - .1rem) calc(100% - 80px - 0.04rem),calc(100% - .1rem) .1rem,.1rem .1rem);
}

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