1

divのような三角形のクリック可能なボタンを作成しようとしています.添付の画像は、実際に達成したいものです. 画像

これは私がこれまでに到達したものです、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; 
}
4

1 に答える 1

0

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/

于 2013-03-05T18:33:06.693 に答える