CSSのみで下向きの（画像を含む）ボタンを作成することはできますか？

Question

私はこれをCSSだけで作成したいと思います。これは可能ですか？もしそうなら、皆さんが私を助けてくれますか？

Answer 1

国境や擬似要素とかなり簡単：

<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

この基本的なボタンを試してみてください：

.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

どのように次のようなものについて：

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