This commit is contained in:
parent
c7d4cc435f
commit
9e11f6bdbf
@ -8,3 +8,10 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<br>
|
||||
<div class="hexagon">
|
||||
<div class="hexagon-inside">
|
||||
<div class="hexagon-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
@ -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;
|
||||
}
|
||||
|
Reference in New Issue
Block a user