使用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來製作箭頭而不是圓角

回答

相關問題