diff --git a/src/app/boards/boards.component.html b/src/app/boards/boards.component.html
index 26bcc42..f38e6d0 100644
--- a/src/app/boards/boards.component.html
+++ b/src/app/boards/boards.component.html
@@ -8,3 +8,10 @@
   </div>
 
 </div>
+<br>
+<div class="hexagon">
+  <div class="hexagon-inside">
+      <div class="hexagon-image">
+      </div> 
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index 90d4ee0..61e6c80 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,39 @@
 /* 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;  
+}