How to "crop / slice" image layout with HTML and CSS?

Basically this is a% square-shaped% that is rotated to 45 degrees , and then added within it a new div parent , which will contain the image as div child which will be rotated at -45 degrees to return to the initial rotation of 0 degrees , or vice versa.

In other words:

/* Aqui a div pai é rodada a 45 graus */
.quadrado {
    width: 200px;
    height: 200px;
    margin: 50px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    overflow: hidden;
}

/* E aqui (onde está a imagem como background) volta a ser rodada novamente para a sua posição inicial */
.minhaImagem {
    background: url(http://i.imgur.com/QDJ7Nae.jpg);
    width: 300px;
    height: 300px;
    margin: -50px;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background-size: cover;
    background-position: 50%;
}

<div class="quadrado">
    <div class="minhaImagem"></div>
</div>

In the example of the image that you added along with your question the image seems to be a bit flattened, I was there playing around with CSS code and I was able to create the effect of the square with that rotation as I described above, but I did not try to flatten it, but if you waste a little time back from the code I think you'll be able to create that same effect. You can also take a look at in this article that you can to help you achieve what you want.