11-diamond-images.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Parallelograms</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div, img {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: middle;
}
.rotate {
  width: 200px;
  height: 200px;
  transform-origin: 50%;
  transform: rotate(45deg);
  overflow: hidden;
}
.rotate > img {
  max-width: 100%;
  transform: rotate(-45deg) scale(1.42);
}
.clip-path {
  -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
</style>
</head>
<body>

<div class="rotate">
  <img src="img/haircut.jpg" />
</div>
<img class="clip-path" src="img/haircut.jpg" />
</body>
</html>