css - 如何制作三 Angular 形焦点？

Question

我需要在按钮上做一个三 Angular 形聚焦，就像这张图片一样

我查看了不同的示例，例如 this , 但焦点区域是矩形的。

是否可以制作三 Angular 形焦点？

Answer 1

您可以使用 clip-path 为 button 赋予三 Angular 形形状，并将相同的形状应用于 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);
}