有没有办法为剪辑路径css添加边框？ [复制]答案

【问题标题】：Is there any way to add a border to a clip path css? [duplicate]有没有办法为剪辑路径css添加边框？ [复制]
【发布时间】：2021-01-13 08:49:54
【问题描述】：

我正在努力复制下图所示的按钮样式。我试过使用剪辑路径，但在有可见边框和半透明背景的情况下，我没有得到想要的效果。

有没有简单的解决方法？

https://i.stack.imgur.com/kI5eX.png

【问题讨论】：

剪辑路径只是删除东西，它们不能添加边框。如果您想要边框，请使用适当形状的笔触，即多边形或路径。
可以混合使用剪辑路径和渐变。 codepen.io/gc-nomade/pen/eYzgZgX 使用 var(--css) 可以更轻松地重置 vlaues

标签： html css svg sass clip-path

【解决方案1】：

要获得此图像的精确副本，背景需要是 svg 图像。

但是，如果你的背景是坚实的，你可以像这样使用 css 来解决问题

button {
  background-color: #bb000077;
  border: 2px solid #ff6666;
  font-weight: bold;
  color: #fff;
  font-size: 20px;
  padding: 15px 25px;
  position: relative;
  outline: none;
}

button::before,
button::after {
  content: '';
  pointer-events: none;
  position: absolute;
  width: 29px;
  height: 29px;
  background-color: #fff;
  transform: rotate(45deg);
}

button::after {
  top: -16px;
  right: -16px;
  border-bottom: 2px solid  #ff6666;
}

button::before {
  bottom: -16px;
  left: -16px;
  border-top: 2px solid  #ff6666;
}

&lt;button&gt;Start my free session&lt;/button

【讨论】：

【解决方案2】：

您使用clip-path 的想法应该可行。这是一种方法

a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
    
  background-color: rgba(255, 0, 0, .3);
  box-shadow: inset 0 0 0 3px red;
  
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

a:before,
a:after {
  content: '';
  position: absolute;
  width: 3px;
  height: 30px;
  background-color: red;
}

a:before {
  left: 0;
  top: 100%;
  
  transform-origin: 50% 0%;
  transform: translateY(-20px) rotate(-45deg);
}

a:after {
  right: 0;
  bottom: 100%;
  
  transform-origin: 50% 100%;
  transform: translateY(20px) rotate(-45deg);
}

<a href="">Start my free session</a>

此解决方案的唯一问题是对 clip-path https://caniuse.com/?search=clip-path 的支持

这是一个代码笔https://codepen.io/Hornebom/pen/912d2557034ba9c3936a06ced8584de4

【讨论】：