如何在 CSS 中创建八角形蒙版答案

【问题标题】：How can I create Octagonal mask in CSS如何在 CSS 中创建八角形蒙版
【发布时间】：2015-03-17 19:32:49
【问题描述】：

我正在尝试创建一个图像为八角形的设计。我使用了边框技巧，但图像需要在八角形内。在这种情况下不适合使用伪元素，因为主体也会有自己的背景图像。用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;
}

&lt;div&gt;&lt;/div&gt;

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

【问题讨论】：

标签： html css geometry css-shapes

【解决方案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);
}

&lt;div class='octa'&gt;&lt;/div&gt;

【讨论】：

更新了小提琴和答案。感谢您指出这一点。
虽然你的方法很好，但也有一些错误：1）供应商前缀，2）伪元素的旋转。我建议这个代码：jsfiddle.net/webtiki/maLp7hLc/5
这个解决方案很好，但它使用背景图像。这是OP问的吗？ background-images 没有很多控制选项。
恕我直言，这是最好的答案，因为它使用单个元素并且应该打一个绿色勾号。
#ThePragmatick 你的回答没问题。它使用许多标签的方式，并且更容易理解这个答案。

【解决方案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;
}

在行动中看到它here

【讨论】：