How to create an octagonal mask in CSS

Question

I am trying to create a design in which the images are octagonal. I used a border hack, but the image should be inside the octagon shape. Using pesudo elements is not suitable in this case, since 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>

Run codeHide result

I wanted this image to be in the golden area: http://images.visitcanberra.com.au/images/canberra_hero_image.jpg . In addition, I used vh so that it responds to the height of the window.

Answer 1

Fiddle

: Fiddle

<div class='octa'></div>

CSS

: 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>

Hide result

Answer 2

, div , . , - , .

div, ,

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

.

<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;
}