html - 如何在 CSS 中创建八 Angular 形蒙版

Question

我正在尝试创建一个图像为八 Angular 形的设计。我使用了 border hack，但图像需要在八 Angular 形内部。在这种情况下使用伪元素并不合适，因为正文也将有自己的背景图像。可以用 css 吗？

我的代码

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>

我希望这张图片位于黄金区域:http://images.visitcanberra.com.au/images/canberra_hero_image.jpg .另外，我使用了 vh 以便它响应窗口高度。

Answer 1

Fiddle

背景图片在 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>