31 lines
1.1 KiB
CSS
31 lines
1.1 KiB
CSS
.hex {
|
|
display: block;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
width: 320px;
|
|
height: 277.12px; /* width * 0.866 */
|
|
background: red;
|
|
box-sizing: border-box;
|
|
-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
|
|
-moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
|
|
}
|
|
|
|
.hex-background {
|
|
position: absolute;
|
|
background-color: orange; /*color of the main-background*/
|
|
top: 2px; /* equal to border thickness */
|
|
left: 2px; /* equal to border thickness */
|
|
width: 316px; /* container height - (border thickness * 2) */
|
|
height: 273.12px; /* container height - (border thickness * 2) */
|
|
-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
|
|
-moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
|
|
}
|
|
|
|
.hex img {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
|
|
-moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
|
|
} |