Ist es möglich, mit nur CSS eine Schaltfläche zu erstellen, die nach unten zeigt (Bild eingeschlossen)?

Question

Ich möchte dies nur mit CSS erstellen. Ist das möglich? Wenn ja, könnt ihr mir helfen?

Answer 1

Ziemlich einfach mit Grenzen und ein Pseudo-Elemente:

<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

Versuchen mit dieser grundlegenden Taste zu experimentieren:

.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

wie über etwas wie folgt aus:

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