How to make a triangular onfocus? - css

Question

I need to do a triangular onfocus on button, like on this image
I looked at different examples like this, but the focus zone is rectangular.
Is it possible make triangular onfocus?

Answer 1

You could use clip-path to give a triangular shape to the button and apply the same shape to button::before pseudoelement slightly enlarged to mimic an outline, e.g.
Codepen Demo
Note: working only on browser supporting 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

Maybe like this?
Adding an element after the button to provide the triangular shape...
Now it is 45° rotation, you could play by skewing to get another angle.
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 3

You could use the map tag : http://www.w3schools.com/tags/tag_map.asp
But in that case your button must be a picture.

Answer 4

little late,
but you can do for almost every browser with transform and a pseudo.
Eventually add background gradient and shadow : 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
}
arrow
longer arrow
#

Answer 5

you can use this site and make triangular, polygon: The Shapes of CSS - CSS-Tricks
https://css-tricks.com/examples/ShapesOfCSS
make a css class. add that class on focus.
http://www.w3schools.com/jquery/html_addclass.asp