Question

尝试在响应链接的末尾添加一个三角形。我可以在链接修复时执行此操作，但是当使用较长的单词时，它会中断。感谢

代码是：

<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;
}

小提琴是： https://jsfiddle.net/0047g8vv/4/

Answer 1

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
}

Answer 2

更改位置属性，在您的情况下指定左侧和右侧都没有意义 - 因为您希望它响应宽度更改。

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;
}

Answer 3

这是因为您使用left设置了位置，无论元素的大小如何，您都希望三角形与right的距离相同。我已更新了您的fiddle

我已经设置right: -38px并且还缩小了三角形的大小以便它们适合。

Answer 4

删除“left”属性并添加一个负“right”属性，其值与边框宽度相同：

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;
}

请参阅https://jsfiddle.net/0047g8vv/3/

Answer 5

您可以使用left: 100%做出响应，如下所示：

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>

这样，无论箭头的宽度如何，您都可以确保箭头始终位于正确的位置。

Answer 6

Here you go，只需在那里添加一个减号。

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;
}

Answer 7

除了之前的答案之外，我还会将display的{{1}}指定为a，并将inline-block和padding-top放宽以确保正确的高度：

＆＃13;

-bottom

＆＃13;

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;
}

＆＃13;

Answer 8

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;
}

解决您的问题？

如果更改填充，则还要更改左侧和顶部proporcinalmente

CSS方形链接后左三角形

8 个答案: