如何制作三角形焦点？

Question

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

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

是否可以制作三角形对焦？

Answer 1

您可以使用 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);
}

Answer 2

您可以使用 map 标签：http://www.w3schools.com/tags/tag_map.asp

但在那种情况下，您的按钮必须是图片。

Answer 3

大概是这样的？在按钮后添加一个元素以提供三角形...

现在是45度旋转，你可以斜着玩，换个角度。

CodePen Sample

button:hover { border-color: blue; }
button:hover:after { border-color: blue;}

button {
  font-size: 14px;
  background: none;
  border: 1px solid red;
  border-right: 0;
  position: relative;
  height: 44px;
  z-index: 1;
  background-color: #FFF;
}
button::after {
  content: "";
  display: block;
  position: absolute;
  width: 30px; height: 30px;
  background: #FFF;
  right: -15px;
  top: 5px;
  transform: rotate(-45deg);
  z-index:-1;
  border-right: 1px solid Red;
  border-bottom: 1px solid Red;
}

Answer 4

您可以使用此网站制作三角形、多边形：CSS 的形状 - CSS-技巧

https://css-tricks.com/examples/ShapesOfCSS

做一个cssclass。添加 class 重点。

http://www.w3schools.com/jquery/html_addclass.asp

Answer 5

有点晚，

但是 你可以为几乎每个浏览器做 transform 和伪 。

最终添加背景渐变和阴影：http://codepen.io/gc-nomade/pen/yOjOby

* {
  box-sizing: border-box;
}
a {

  display: inline-block;
  padding: 0.5em 1em;
  margin: 0 1.5em 0 0;
  text-decoration: none;
  color: #177EE5;
  border: solid 3px;
  border-radius: 5px;
  border-right: none;
  position: relative;
  background: linear-gradient(to right, lightgray, white, lightgray);
  box-shadow: 0 0 5px black;
}
a:after {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  right: -.8em;
  width: 1.75em;
  border-radius: inherit;
  border-top: solid;
  border-right: solid;
  border-color: inherit;
  transform: rotate(45deg);
  background: linear-gradient(45deg, transparent 45%, lightgray 60%);
  box-shadow: 0px -5px  5px -5px black, 5px 0px  5px -5px black
}

<a href="#">arrow</a>
<a href="#">longer arrow</a>
<a href="#">@</a>

如何制作三角形焦点？

How to make a triangular onfocus?

css

css-shapes