È possibile creare un pulsante che punta verso il basso (immagine inclusa) con solo CSS?

Question

Mi piacerebbe creare questo usando solo CSS. È possibile? Se è così, puoi aiutarmi?

Answer 1

Abbastanza facile con bordi e un elemento pseudo:

<a href="#" id="button">ALL</a> 

#button::after { 
    content: ""; 
    border: 64px solid transparent; 
    border-top: 12px solid orange; 
    position: absolute; 
    top: 29px; 
    left: 0; 
} 

DEMO

Answer 2

provare a sperimentare con questo pulsante di base:

.btn { 
    width: 100px; 
    height: 30px; 
    text-align: center; 
    border: 0; 
} 
.btn-arrow { 
    position: relative; 
    background: coral; 
} 
.btn-arrow:after { 
    border: solid transparent; 
    content:""; 
    position: absolute; 
    border-top-color: coral; 
    border-width: 16px 50px; 
    left: 0px; 
    top: 100%; 
    margin-top: 0px; 
} 

http://jsfiddle.net/dfsq/tNjCb/1/

Answer 3

come su qualcosa di simile al seguente:

http://jsfiddle.net/WDCu3/

<div id="test">Testing</div> 
<div id="arrow"></div> 

#test {background-color:red; width:100px;} 
div {text-align:center;} 

#arrow { 
    border-top: 15px solid red; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    height: 0; 
    width:0; 
}