纯css写单选,多选图片

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