html - 如何在 css 中使用 clip-path 属性作为边框

Question

我有 clip-part 来制作“切 Angular ”效果。

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

如何在鼠标悬停时制作绿色边 Angular ？

.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>