《HTML》

要链接jquery.min.js

<ul>

<li> 苹果 <i class="icon">√</i> </li>

<li>大西瓜<i class="icon">√</i></li> <!-- 当点击大西瓜的时候√是斜的 -->

<li>樱桃<i class="icon">√</i></li>

<li>香蕉<i class="icon">√</i></li>

<li>橘子<i class="icon">√</i></li>

<li>菠萝蜜<i class="icon">√</i></li>

</ul>

《css》

* {

margin:0;

padding:0;

}

ul {

width:100%;

margin-top:200px;

text-align:center;

font-size:0;

}

ul li {

display:inline-block;

padding:8px 20px;

font-size:14px;

color:#222;

border:1px solid #ddd;

margin-right:20px;

border-radius:4px;

position:relative;

cursor:pointer;

}

ul li.active:before {

content:'';

display:block;

height:0;

width:0;

font-size:0;

border:10px solid transparent;

border-right:10px solid #008028;

border-bottom:10px solid #008028;

position:absolute;

right:0;

bottom:0;

}

ul li.active {

border:1px solid #008028;

}

.icon {

display:none;

position:absolute;

color:#fff;

font-size:14px;

bottom:-1px;

right:2px;

}

ul li.active .icon {

display:block;

}

《js》

$(function() {

$("ul li").click(function() {

$(this).toggleClass('active');

})

})