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

Question

我正在尝试创建一个图像为八角形的设计。我使用了 border hack，但图像需要在八角形内部。在这种情况下使用 pesudo-elements 是不合适的，因为正文也将有自己的背景图像。 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 以便它响应 window 高度。

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>

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

查看实际效果 here

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

How can I create Octagonal mask in CSS

html

css

geometry

css-shapes