如何在CSS中创建八边形蒙版 [英] How can I create Octagonal mask in CSS

问题描述

我想创建一个设计，其中的图像是八边形的形状。我使用的边框黑客，但图像需要在八角形内。在这种情况下使用pesudo元素不适合，因为身体也将有自己的背景图像。是否可以使用css？

我的代码

  div {width：100vh;高度：100vh;背景：金; position：relative;} div：before {content：; position：absolute; top：0; left：0;边界底部：29vh纯金; 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，以便它响应窗口高度。

解决方案

小提琴

在小提琴中的背景图片：小提琴

 < 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：中心; 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>  

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.

解决方案

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>

这篇关于如何在CSS中创建八边形蒙版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！