Question

我有一个链接，就像SO'Ask Question'按钮一样，但是我希望它的右边指向箭头。

这是http://jsfiddle.net/U4zXS/1/到目前为止我所拥有的。我的右侧是圆形的，但我需要它像箭头一样。

<a class="arrow_link" href="{$base_url}signup">GET STARTED WITH OUR <span class="purple">FREE TRIAL</span></a>


.arrow_link{
    float: left;
    background-color: $color-orange;
    border-radius: 0 25px 25px 0;
    padding: 4px 15px 6px 8px;
    margin-top: -5px;
    font-weight: bold;
    color: $color-white;
}
a{
    text-decoration: none;
}

Answer 1

您可以尝试使用边框三角形方法：

.arrow_link::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
    border-style: solid;
    border-color: transparent #F78E1E;
    border-width: 15px 0 15px 15px;
    width: 0;
    height: 0;
}

请注意，您还必须将position: relative添加到.arrow_link本身。

这是更新的小提琴：FIDDLE

Answer 2

您可以使用CSS :after psuedo-element，如下所示：

.arrow_link { position: relative; }
.arrow_link:after {
   content: '';
   display: block;
   border: 10px solid transparent;
   border-left-color: red;
   top: 0;
   right: -20px;
}

这会在你的a附加一个伪元素，它将使用边框技巧显示箭头，正如CSS Tricks所解释的那样。

Answer 3

您可以使用伪元素在元素的末尾创建三角形。这里还有一些info about pseudo elements可以帮助您开始使用它们。

这是改变的css：

.arrow_link{
    float: left;
    background-color: $color-orange;
    padding: 4px 15px 6px 8px;
    margin-top: -5px;
    font-weight: bold;
    color: $color-white;
    position: relative;
}
.arrow_link:after {
    content: "";
    display: block;
    position: absolute;
    border-left: 15px solid #f78e1e;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    left: 100%;
    top: 0;
}

最后，小提琴：Demo

你唯一的问题是你的元素没有固定的高度，如果你的元素没有改变就不会有问题。 CSS三角形不是最灵活的东西，但它们可以解决问题。

Answer 4

请查看此http://jsfiddle.net/WW32n/1/以及此处的一些参考资料http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

<p class="triangle-isosceles right">The entire appearance is created only with CSS.</p>

和css

.triangle-isosceles {
  position:relative;
  padding:15px;
  margin:1em 0 3em;
  color:#000;
  background:#f3961c; /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
  background:-moz-linear-gradient(#f9d835, #f3961c);
  background:-o-linear-gradient(#f9d835, #f3961c);
  background:linear-gradient(#f9d835, #f3961c);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

/* creates triangle */
.triangle-isosceles:after {
  content:"";
  position:absolute;
  bottom:-15px; /* value = - border-top-width - border-bottom-width */
  left:50px; /* controls horizontal position */
  border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
  border-style:solid;
  border-color:#f3961c transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

使用CSS制作箭头而不是圆角

4 个答案: