前端 - css能否实现如下的效果？

Question

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

Answer 1

使用 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 2

用border-image就行了

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

或者用整个的背景图也行