css - 如何使三 Angular 形对焦？

我需要在按钮上做一个三角形的onfocus，就像这张图片一样



我看了像this这样的不同示例，但是焦点区域是矩形的。

是否可以使三角形对焦？

最佳答案

您可以使用clip-path为button赋予三角形形状，并将相同的形状应用于button::before略微放大以模仿轮廓的伪元素，例如


  Codepen Demo


注意：仅在支持clip-path的浏览器上工作

标记

<button><span>button</span></button>

的CSS

button {
  position: relative;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 50% 100% 0);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 50% 100% 0);
}

button span {
  position: relative;
  z-index: 1;
  display: block;
  background: linear-gradient(#f4f4f4, #d4d4d4);
  padding: 10px 20px;
}

button:focus {
  outline: none;
  -webkit-clip-path: polygon(0 0, 0 100%, 90% 100%, 100% 50%, 90% 0);
  clip-path: polygon(0 0, 0 100%, 90% 100%, 100% 50%, 90% 0);
}

button::before,
button span {
   -webkit-clip-path: inherit;
   clip-path: inherit;
}

button:focus::before {
   content: "";
   position: absolute;
   height: calc(100% + 4px);
   width: calc(100% + 4px);
   left: -2px;
   top: -2px;
   background: rgba(81,153,219, .7);
}