CSS left triangle after square link

Question

Trying to add a triangle to the end of a link thats responsive. I can do it when the link is fixed however when longer words are used it breaks. Thanks

Code is:

<a href="" class="blue-btn">View this project</a>
<br><br><br>
<a href="" class="blue-btn">View this longer project</a>

a.blue-btn {
  padding: 10px 22px;;
  background-color: blue;
  color:white;
  position:relative;
}
a.blue-btn:after {
content: "";
position: absolute;
bottom: 0px;
right: 0;
left: 154px;
width: 0;
height: 0;
border-width: 42px 42px 0 0px;
border-style: solid;
border-color: blue transparent transparent transparent;
}

Fiddle is: https://jsfiddle.net/0047g8vv/4/

possible duplicate of http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive — Harry, Sep 04 '15 at 14:16

score 0 · Answer 1 · edited Sep 04 '15 at 14:22

0

a.blue-btn:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #007bff;
    right:-10px
}

edited Sep 04 '15 at 14:22

Deepak Yadav

6,804
5
31
49

answered Sep 04 '15 at 14:19

Paul Booblick

363
1
7

score 0 · Answer 2 · answered Sep 04 '15 at 14:20

Change the position properties, doesn't make sense in your case to specify both left and right - because you want it to respond to width changes.

a.blue-btn:after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: -42px;
    width: 0;
    height: 0;
    border-width: 42px 42px 0 0px;
    border-style: solid;
    border-color: blue transparent transparent transparent;
}

score 0 · Answer 3 · answered Sep 04 '15 at 14:20

It's because you were setting the position using left, You want the triangle positioned the same distance to right no matter the size of the element. I've updated your fiddle

I've set right: -38px and also reduced the size of the triangles so they fit.

score 0 · Accepted Answer · answered Sep 04 '15 at 14:20

0

Remove the "left" property and add a negative "right" property with the same value as the border width :

a.blue-btn {
  padding: 10px 22px;;
  background-color: blue;
  color:white;
  position:relative;
}
a.blue-btn:after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: -42px;
    width: 0;
    height: 0;
    border-width: 42px 42px 0 0px;
    border-style: solid;
    border-color: blue transparent transparent transparent;
}

See https://jsfiddle.net/0047g8vv/3/

answered Sep 04 '15 at 14:20

Derek

1,826
18
25

This works however it's forcing the hover not to change on hover: I've updated the fiddle to include the hover state: https://jsfiddle.net/0047g8vv/4/ – Jolen Sep 04 '15 at 14:44
Just change the border-top-color on hover accordingly: https://jsfiddle.net/03cb35cp/ – Derek Sep 04 '15 at 14:54

Yandy_Viera · Answer 5 · 2015-09-04T14:27:22.520

You can use left: 100% to do it responsive like this:

a.blue-btn {
  padding: 10px 22px;;
  background-color: blue;
  color:white;
  position:relative;
}
a.blue-btn:after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 0;
    border-width: 39px 42px 0 0px;
    border-style: solid;
    border-color: blue transparent transparent transparent;
}

<a href="" class="blue-btn">View this project</a>
<br><br><br>
<a href="" class="blue-btn">View this longer project</a>
<br><br><br>
<a href="" class="blue-btn">View this longer longer longer longer longer project</a>

This way you ensure that the arrow is always in the right place, regardless of the width of the arrow.

score 0 · Answer 6 · answered Sep 04 '15 at 14:24

Here you go, just add a minus right on there.

a.blue-btn:after {
    content: "";
    position: absolute;
    bottom: -0.4px;
    right: -40px;
    width: 0;
    height: 0;
    border-width: 37.9px 42px 0 0px;
    border-style: solid;
    border-color: blue transparent transparent transparent;
    white-space: nowrap;
}

score 0 · Answer 7 · answered Sep 04 '15 at 14:25

Additional to the previous answers, I would specify the display of the a as inline-block and loose the padding-top and -bottom to ensure the correct height:

a.blue-btn {
  background-color: blue;
  color: white;
  position: relative;
  height: 42px; // ensures the correct height - same value as in the :after
  line-height: 42px; // center the text vertically
  padding-left: 10px;
  padding-right: 10px;
  display: inline-block;
}
a.blue-btn:after {
  content: "";
  position: absolute;
  bottom: 0px;
  right: -42px;
  width: 0;
  height: 0;
  border-width: 42px 42px 0 0px;
  border-style: solid;
  border-color: blue transparent transparent transparent;
}

<br><a href="" class="blue-btn">View this project</a>
<br>
<br>
<br>
<a href="" class="blue-btn">View this longer project</a>

score 0 · Answer 8 · answered Sep 04 '15 at 14:31

a.blue-btn {
  padding: 10px 22px;;
  background-color: red;
  color:white;
  position:relative;
}
a.blue-btn:after {
    content: "";
    position: relative;
    top: 27px;
    right: 0;
    left: 59px;
    border-width: 37px 37px 0 0px;
    border-style: solid;
    border-color: blue transparent transparent transparent;
}

Solve your problem?

If you change the padding you to change the left and top proporcinalmente also

CSS left triangle after square link

8 Answers8