我正在尝试创建一个图像为八 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 以便它响应窗口高度。
最佳答案
背景图片在 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>
关于html - 如何在 CSS 中创建八 Angular 形蒙版,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28030659/