如何在CSS中使用边框的clip-path属性

Question

我必须clip-part做出“偷工减料”的效果。

我想将背景更改为白色并使用绿色边框。问题是，当我将背景更改为白色时，角落是空的：

如何在悬停时制作绿色边框角？

.test {
  background: red;
  width: 100px;
  height: 100px;
  /* CORNERS */
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

.test:hover {
  background: white;
  cursor: pointer;
  border: 3px solid green;
}

<div class='test'>Test</div>

JSFIDDLE

Answer 1

添加一些渐变来填充缺失的空间：

.test {
  background: red;
  width: 100px;
  height: 100px;
  box-sizing:border-box;
  
  /* CORNERS */
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

.test:hover {
  --grad:transparent 49.5%,green 50%;
  background: 
    linear-gradient(to top right   ,var(--grad)) top    right,
    linear-gradient(to top left    ,var(--grad)) top    left,
    linear-gradient(to bottom right,var(--grad)) bottom right,
    linear-gradient(to bottom left ,var(--grad)) bottom left,
    white;
  background-size:13px 13px; /* 10px of the clip-path + 3px of border */
  background-repeat:no-repeat;
  background-origin:border-box;
  cursor: pointer;
  
  border: 3px solid green;
}

<div class='test'>
 </div>