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

Question

我有一个链接，它像SO的“提问”按钮一样是一个方框，但我希望它的右侧像箭头一样指向。

这是我目前拥有的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;
}

- Pierce McGeough

---

请查看三角形生成器：http://apps.eky.hk/css-triangle-generator/ - Davin Tryon

请返回翻译后的文本：或者这里http://cssarrowplease.com/ - Pete

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

请注意，您还需要将.arrow_link本身添加position: relative。

这是更新后的示例：FIDDLE。

- matewka

---

谢谢，这在链接上很好用，但是它不会在提交按钮上起作用吗？似乎没有影响。 - Pierce McGeough

@PierceMcGeough 你是指 <input type="submit"> 吗？如果是，那么它不会起作用，因为 <input> 标签不能有子元素。 ::after 伪元素被渲染为一个元素的子元素。 - matewka

Answer 2

你可以使用CSS的:after伪元素，如下所示：

.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上所述。

- Cas Cornelissen

Answer 3

你可以使用伪元素来制作元素末尾的三角形。这里有更多关于伪元素的信息，应该可以帮助你开始使用它们。

这是修改后的 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;
}

最后，一个小例子：演示

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

- Josh Powell

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

- Gandalf