css能否实现如下的效果？

Question

要求div的四个角都如图上所示，请各位指点！！

Answer 1

用border-image就行了

https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image
https://juejin.cn/post/6995575394464169997
https://www.jianshu.com/p/6ca92208ae4f

或者用整个的背景图也行

Answer 2

使用 clip-path 切割背景，两个div 嵌套。

外层 div 设置 border，内层 div width 和 height 设置为 100%。

<div class="container">
    <div class="inner">
        这里用于效果展示。用来展示 css 代码的实际效果。<br>
        没有实际意义。
    </div>
</div>

CSS:

.container {
  color: #ffffff;
  width: 300px;
  height: 300px;
  border: 4px solid transparent;
  box-sizing: border-box;
  background: #222;
  clip-path: polygon(
                  15px 0, calc(100% - 15px) 0, 100% 15px,
                  100% calc(100% - 15px), calc(100% - 15px) 100%,
                  15px 100%, 0 calc(100% - 15px), 0 15px
  );

  > .inner {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, #8F41E9, #578AEF);
    clip-path: polygon(
                    15px 0, calc(100% - 15px) 0, 100% 15px,
                    100% calc(100% - 15px), calc(100% - 15px) 100%,
                    15px 100%, 0 calc(100% - 15px), 0 15px
    );
  }
}

Answer 3

让亲爱的 UI 给图，
能手写，
但是不建议，
整个项目里这种小细节不要太多
用循环的形式给4角循环设置位置，角度，旋转，
这里只是一个基本的凹状态

.box{
    width: 30px;
    height: 30px;
    border: 2px solid;
    border-left-width: 0;
    border-bottom-width: 0;
    position: relative;
    &::after{
      position: absolute;
      content: "";
      top: -10px;
      right: -10px;
      transform: rotate(135deg);
      width: 20px;
      height: 20px;
      background-color: white;
      border-right: 2px solid;
    }
}

Answer 4

以前答过的类似问题
https://segmentfault.com/q/1010000016573624/a-1020000016574049