How can I create Octagonal mask in CSS

Question

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.

Answer 1

What you need to do is to make a div inside your shape, that contains the picture. And then set the shape's overflow to hidden and background color to transparent, so that only the part of the picture thats inside the shape will show.

And then set the image's height and width to be equal to the div that contains it using this code

.pic img{
    width:100%;
    height:100%;
}

The final code will look something like this

<div>
    <div class="pic">
        <img src="http://images.visitcanberra.com.au/images/canberra_hero_image.jpg">
    </div>
</div>

div {
    width: 100vh;
    height: 100vh;
    background: transparent;
    position: relative;
    overflow:hidden;
}
.pic{
    width:120vh;
    height:120vh;
}
.pic img{
    width:100%;
    height:100%;
}

div:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29vh solid transparent;
    border-left: 29vh solid #fff;
    border-right: 29vh solid #fff;
    width: 42vh;
    height: 0;
}

div:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29vh solid transparent;
    border-left: 29vh solid #fff;
    border-right: 29vh solid #fff;
    width: 42vh;
    height: 0;
}

See it in action here

Answer 2

Fiddle

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>