You can use a rotated pseudo element :
Generic solution:
HTML:
<div></div>
CSS:
div {
width:200px;
height:200px;
overflow:hidden;
}
div:before {
content:"";
display:block;
width:70%;
height:70%;
background-image: url(/*Path to your image*/);
transform: rotate(-45deg);
transform-origin:0 0;
-ms-transform: rotate(-45deg);
-ms-transform-origin:0 0;
-webkit-transform: rotate(-45deg);
-webkit-transform-origin:0 0;
}
EDIT: Your use case
In your use case, you can consider just rotating .arrow-down
by 45deg and set overflow:hidden;
on the sections. (you also need to remove the existing borders on .arrow-down
and give it desired dimensions)