如何在CSS中使用clip-path属性作为边框 [英] How to use clip-path property for border in css

问题描述

我有 clip-part 来制作切角"，效果.

I have clip-part to make "cut corner" effect.

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

I would like to change background to white and use green border. Problem is, when I change background to white, corners are empty:

如何在悬停上制作绿色边框角?

How can I make green border corners on hover?

.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

推荐答案

添加一些渐变以填充缺少的空间:

add some gradient to fill the missing spaces:

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

这篇关于如何在CSS中使用clip-path属性作为边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！