html
<ul class="wrap-selectImg">
<li>
<input type="checkbox" name="fj" id="" value="">
<img src="../public/images/111111.jpg" alt="">
<span><i></i></span>
<p>111111.jpg</p>
</li>
<li>
<input type="checkbox" name="fj" id="" value="">
<img src="../public/images/111111.jpg" alt="">
<span><i></i></span>
<p>111111.jpg</p>
</li>
</ul>
css
.wrap-selectImg li{float:left;position:relative;}
.wrap-selectImg li input[type='checkbox'] {
opacity: 0;
position: absolute;
left: 0;
bottom: 0;
top: 0;
right: 0;
height: 100%;
width: 100%;
}
.wrap-selectImg li img {
border: 4px solid transparent;
}
.wrap-selectImg li input[type='checkbox']:checked ~ img{
border: 4px solid #1E9FFF;
}
.wrap-selectImg li span {
width: 0;
height: 0;
border-top: 54px solid #1E9FFF;
border-left: 78px solid transparent;
position: absolute;
right: 0;
top: 0;
display: none;
}
input[type='checkbox']:checked~span {
display: block;
}
.wrap-selectImg li span i {
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
position: absolute;
right: 10px;
width: 10px;
height: 20px;
top: -44px;
transform: rotate(45deg);
}