斜DIV没有显示

嗨，大家好我试图recrate一个倾斜DIV如This 但我不能似乎得到的图片都显示：斜DIV没有显示

HTML：

<div class="headerLine"> 

</div>

CSS：

.headerLine{ 
    position: relative; 
    width: 100%; 
    overflow: hidden; 
    height:100%; 
    background-image: url("../Images/back1.jpg"); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.headerLine:after{ 
    content: ""; 
    position: absolute; 
    z-index: 1; 
    pointer-events: none; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    /* background: url(../images/sliderL.png) center center no-repeat; */ 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    border-bottom: 150px solid white; 
    border-left: 3000px solid transparent; 
}

打造其作为倾斜上面贴的例子一个div任何帮助，第一个格，将是巨大的

来源

2017-10-14 RonTheOld

这里的问题是在div中的height: 100%。它是那个元素的父母，所以父母的身高是多少？如果它没有设置任何东西，那么浏览器没有什么可引用的。

你可以使用vh（视图高度）来解决这个问题。

SEE CODEPEN EXAMPLE

来源

2017-10-14 01:20:44 DollarChills

至于你提到的背景没有显示，我得到的理由，就是你有没有放在DIV中的任何内容，所以如何一些背景将会出现。

您可以放置一些内容或使用一些静态高度，如100vh。

[SEE THE EXAMPLE][1] 




[1]: https://codepen.io/hardenrahul/pen/NaLeNv

来源

2017-10-14 07:27:13

斜DIV没有显示

回答

相关问题