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

我有一个类似SO'问题问题'按钮的链接，但我希望它的右侧像箭头一样指向。使用CSS来制作箭头而不是圆角

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

来源

2014-02-17 Pierce McGeough

结帐的三角形生成：HTTP：// apps.eky.hk/css-triangle-generator/ –

or this http://cssarrowplease.com/ – Pete

您可以用边界三角方法试试：

.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

来源

2014-02-17 14:35:41 matewka

谢谢这个作品盛大在链接上，但不会在提交按钮上工作？似乎没有影响 –

@PierceMcGeough你的意思是''？如果是这样，它将无法正常工作，因为''标签不能包含子元素。 ':: after'伪元素被渲染为元素的子元素。 – matewka

您可以使用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。

来源

2014-02-17 14:35:23

您可以使用伪元素在元素的末尾制作三角形。这里有更多的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三角形并不是最灵活的东西，但它们可以诀窍。

来源

2014-02-17 14:35:34

看一看这个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; 
}

来源

2014-02-17 14:37:41 Gandalf

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

回答

相关问题