有什么方法可以为剪辑路径添加边框 css？

Question

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

有没有简单的解决方法？

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

Answer 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;
}

<button>Start my free session</button

Answer 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

有什么方法可以为剪辑路径添加边框 css？

Is there any way to add a border to a clip path css?

html

css

svg

sass

clip-path