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

【问题标题】：How to use clip-path property for border in css如何在css中使用clip-path属性作为边框
【发布时间】：2020-06-20 20:44:20
【问题描述】：

我有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;
}

&lt;div class='test'&gt;Test&lt;/div&gt;

JSFIDDLE

【问题讨论】：

对于 infos ，如果在 2 级容器上使用 clip-path，则可以使用 drop-shadow() filter 在半透明边缘周围添加阴影。子节点上的剪辑路径，然后在父节点上投影：jsfiddle.net/q9tdpvfg

标签： html css clip-path

【解决方案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>

【讨论】：

很好的答案！另外，请记住，IE 不支持 CSS 变量（自定义属性）--var。
@Vepthy 关心 IE ;)
是的，只是一个注释：p

【解决方案2】：

为了可读性，我会回答我的评论：

对于信息，如果clip-path 用于2 级容器，则可以使用drop-shadow() 滤镜在半透明边缘周围添加阴影。

clip-path 应用于孩子

drop-shadow() 在父节点上

没有模糊，无论形状如何，它看起来都像一个边框：https://jsfiddle.net/q9tdpvfg/

jsfiddle demo在sn-p下面：

.test div {
  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 {
  filter: drop-shadow(0px 3px 0px green) drop-shadow(3px 0px 0px green) drop-shadow(-3px 0px 0px green) drop-shadow(0px -3px 0px green);
  /* made 1 for each sides */
}

.test:hover div {
  background: white;
  cursor: pointer;
}

.test {
  width: max-content;
}

.test div {
  /* demo purpose */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

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

【讨论】：

【解决方案3】：

据我所知，实际上不可能在带有剪辑路径的元素周围制作边框。此方法使用内部和外部元素。来源：https://codepen.io/bennettfeely/pen/azJWWX/

.outside {
  position: relative;
    width: 70vmin;
    height: 70vmin;
    background: red;
    -webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
}

.inside {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  background: red;
  -webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
  clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
}

.inside:hover {
  background: white;
  transition: all .2s;
}

.outside:hover {
  background: green;
  transition: all .2s;
}

/* Center the demo */
html, body { height: 100%; }
body {
    display: flex;
    justify-content: center;
    align-items: center;
  background: papayawhip;
}

<div class="outside">
  <div class="inside"></div>
</div>

【讨论】：