I am trying to create a design in which images are octagonal in shape. I used the border hack, but the image needs to be inside the octagon shape. Using pesudo-elements is not apt in this case as the body will also have its own background image. Is it possible with css?
My Code
div {
width: 100vh;
height: 100vh;
background: gold;
position: relative;
}
div:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29vh solid gold;
border-left: 29vh solid white;
border-right: 29vh solid white;
width: 42vh;
height: 0;
}
div:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29vh solid gold;
border-left: 29vh solid white;
border-right: 29vh solid white;
width: 42vh;
height: 0;
}
<div></div>
I wanted this image to be in the golden area : http://images.visitcanberra.com.au/images/canberra_hero_image.jpg . Also, i used vh so that it is responsive to window height.
With background image in fiddle: Fiddle
<div class='octa'></div>
CSS:
Use image as background like this: background-image: url('http://lorempixel.com/400/400/nature');
.octa {
height: 250px;
overflow: hidden;
position: absolute;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
width: 250px;
}
.octa:after {
background-color:#cecece;;
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.octa {
height: 100vh;
overflow: hidden;
position: absolute;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 100vh;
}
.octa:after {
background-image: url(http://images.visitcanberra.com.au/images/canberra_hero_image.jpg);
background-position: center center;
background-size: auto 100vh;
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
<div class='octa'></div>