Triangles

by LuckyCat

HTML

<div class='triangle'></div>



<div class="triangle2">
	<img src="http://www.symbolsbook.ru/images/G/TriedinstvoEye.jpg">
</div>

CSS

body { background-color: #000; }

.triangle {
  overflow: hidden;
  margin: 0 auto;
  
  width: 100px; height: 120px;
  transform: rotate(30deg) skewY(30deg);
}
.triangle:before {
  content: '';
  display: block;
  width: inherit; height: inherit;
  transform: skewY(-30deg) rotate(60deg) translate(50%);
  
  background: linear-gradient(#edebbe, #756240);
}



.triangle2, .triangle2 img {
    display: inline-block;
    height: 200px;
    overflow: hidden;
    width: 200px;
}
.triangle2 {
    transform: translateX(-50%) rotate(-30deg) skewX(30deg) scaleY(0.866);
}
.triangle2 img {
    transform: scaleY(1.155) skewX(-30deg) rotate(30deg) translateX(50%);
}