/* You can add global styles to this file, and also import other style files */ .hexagon { width: 400px; height: 200px; background: red; transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); -webkit-transform: rotate(120deg); overflow: hidden; visibility: hidden; } .hexagon-inside { width: 100%; height: 100%; background: green; transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); overflow: hidden; } .hexagon-image { width: 100%; height: 100%; background-image: url("http://static.vdk2ch.ru:15555/test-public/2.jpg"); background-position: center; background-size: 60%; transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); visibility: visible; }