<div class="container">
    <div class="triangle triangle--1"></div>
    <div class="triangle triangle--2"></div>
    <div class="triangle triangle--3"></div>
</div>
.container {
    position: relative;
    
    width: 400px;
    height: 200px;
    
    background: #000;
}

.triangle {
    position: absolute;
    transform: rotate(45deg);
    
    width: 25px;
    height: 25px;

    background: url("http://hisbvdis-pic.zzz.com.ua/drafts/Frame.svg") 0px 0px / 52px 25px no-repeat;
}

.triangle--1 {
    top: 10%;
    left: 10%;
}

.triangle--2 {
    top: 80%;
    left: 50%;
}

.triangle--3 {
    top: 30%;
    left: 80%;
}

.triangle:hover {
    background-position: -27px -2px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.