<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.