Как сделать треугольную onfocus?

Question

мне нужно сделать треугольную OnFocus на кнопку, как на этом изображении

Я смотрел на различных примерах, как this, но зона фокусировки имеет прямоугольную форму.

Возможно ли сделать треугольный onfocus?

Answer 1

Вы можете использовать clip-path дать треугольную форму с button и применить ту же форму button::before pseudoelement слегка увеличенной, чтобы имитировать схему, например,

Codepen Demo

Примечание: работает только в браузере с поддержкойclip-path

Markup

<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-Tricks

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

сделать класс CSS. добавьте этот класс в фокус.

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>