最佳答案
您可以使用 clip-path
为 button
赋予三 Angular 形形状,并将相同的形状应用于 button::before
伪元素放大以模仿轮廓,例如
注意:仅适用于支持 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);
}
关于css - 如何制作三 Angular 形焦点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36643051/