如何創建三角形可點擊的div？

Question

我想創建一個三角形點擊按鈕像div，在附加的圖像是我想實際實現的。 image

這是我到目前爲止已經達到了，JsFiddle

HTML：

<div class="input"><</div> 

CSS：

body {padding:40px;} 

.input { 
text-decoration:none; 
padding:5px 10px;  
background:#117ebb; 
font-size:9px; 
color:#fff; 
border-radius:5.5px 0px 0px 5px; 
box-shadow: 0px 5px 3px #003355; 
position:relative; 
width:1px; 
height:12px; 
} 

.input:after { 
position:absolute; 
top:0px; 
left:-10px; 
content:" "; 
width: 0; 
height: 0px; 
border-top: 13px solid transparent; 
border-bottom: 13px solid transparent; 
border-right:13px solid #117ebb; 
border-radius:0px 0px 0px 20px; 
} 

Answer 1

CSS純三角和使用jQuery您可以添加點擊事件：

html

<div class="input"></div> 

jQuery的

$(document).ready(function(){ 
    $(".input").click(function(){ 
     alert('hello arrow');   
    }); 
}); 

CSS

body {padding:40px;} 
.input{ 
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 

    border-right:10px solid blue; 
    cursor: pointer; 
} 

http://jsfiddle.net/TvJ6t/