背景图片边框样式通过CSS

Question

我怎样才能使背景图片这个样子的

Answer 1

有我的知识做这个的3种方式 -

1. 老办法 - 在:after使用秩序和:before

.bg-box { 
 
    position: relative; 
 
    background: url(https://static.pexels.com/photos/20974/pexels-photo.jpg) no-repeat 100%; 
 
    width: 500px; 
 
    height: 400px; 
 
    ; 
 
    display: inline-block; 
 
} 
 

 
.bg-box:after, 
 
.bg-box:before { 
 
    content: ''; 
 
    position: absolute; 
 
} 
 

 
.bg-box:before { 
 
    top: 0px; 
 
    left: 0px; 
 
    border-right: 500px solid rgba(221, 221, 221, 0); 
 
    border-top: 60px solid #fff; 
 
} 
 

 
.bg-box:after { 
 
    bottom: 0px; 
 
    left: 0px; 
 
    border-right: 500px solid #fff; 
 
    border-top: 60px solid rgba(243, 245, 246, 0); 
 
}

<div class="bg-box"></div>

使用transform: matrix到的元素。

.bg-box-2 { 
 
    position: relative; 
 
    background: url(https://scontent.fmaa1-1.fna.fbcdn.net/v/t1.0-0/s480x480/10492499_766836143367679_5870385788438363650_n.jpg?oh=8c5e7a0b24c74fea881b7c9c5bbcc246&oe=5A424EF7) no-repeat 100%; 
 
    width: 500px; 
 
    height: 400px; 
 
    ; 
 
    display: inline-block; 
 
    /* IE 9 */ 
 
    -ms-transform: matrix(1, -0.1, 0, 1, 0, 0) ;  
 
    /* Safari */ 
 
    -webkit-transform: matrix(1, -0.1, 0, 1, 0, 0);  
 
    /* Standard syntax */ 
 
    transform: matrix(1, -0.1, 0, 1, 0, 0) 
 
}

<div class="bg-box-2"></div>

使用transform: matrix到元素的:after和:before为最好的结果。

.bg-box-3{ 
 
    position: relative; 
 
    background: url(http://webneel.com/wallpaper/sites/default/files/images/04-2013/island-beach-scenery-wallpaper.preview.jpg) no-repeat 100%; 
 
    width: 500px; 
 
    height: 400px; 
 
    ; 
 
    display: inline-block; 
 
    overflow:hidden; 
 
} 
 
.bg-box-3:after, 
 
.bg-box-3:before { 
 
    content: ''; 
 
    position: absolute; 
 
    width:100%; 
 
    height:20%; 
 
    background:#fff; 
 
} 
 
.bg-box-3:before{ 
 
    top: -3%; 
 
    /* IE 9 */ 
 
    -ms-transform: matrix(1, -0.1, 0, 1, 0, 0);  
 
    /* Safari */ 
 
    -webkit-transform: matrix(1, -0.1, 0, 1, 0, 0);  
 
    /* Standard syntax */ 
 
    transform: matrix(1, -0.1, 0, 1, 0, 0); 
 
} 
 
.bg-box-3:after{ 
 
    bottom:-3%; 
 
    /* IE 9 */ 
 
    -ms-transform: matrix(1, -0.1, 0, 1, 0, 0);  
 
    /* Safari */ 
 
    -webkit-transform: matrix(1, -0.1, 0, 1, 0, 0);  
 
    /* Standard syntax */ 
 
    transform: matrix(1, -0.1, 0, 1, 0, 0); 
 
}

<div class="bg-box-3"></div>

您可以使用方法较受欢迎的链接在您的项目。希望这有助于你理解这个窍门。

Answer 2

可以实现与倾斜位置由pseudo-elements帮助这个效果

body { 
 
    height: 100%; 
 
    background: #fff; 
 
    font-family: sans-serif; 
 
} 
 

 
.image-container { 
 
    background: #fff; 
 
    position: relative; 
 
    z-index: 1; 
 
    height: 500px; 
 
    max-width: 500px; 
 
    margin: 0 auto; 
 
    color: #fff; 
 
} 
 
.image-container:before, .image-container:after { 
 
    background: #fff; 
 
    content: ''; 
 
    display: block; 
 
    height: 30%; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: -1; 
 
    -webkit-backface-visibility: hidden; 
 
} 
 
.image-container:before { 
 
    top: 0; 
 
    -webkit-transform: skewY(-3deg); 
 
      transform: skewY(-3deg); 
 
    -webkit-transform-origin: -100% 0; 
 
      transform-origin: -100% 0; 
 
} 
 
.image-container:after { 
 
    bottom: 0; 
 
    -webkit-transform: skewY(-3deg); 
 
      transform: skewY(-3deg); 
 
    -webkit-transform-origin: 100%; 
 
      transform-origin: 100%; 
 
} 
 

 
.text-content { 
 
    position: absolute; 
 
    bottom: 30%; 
 
    left: 30px; 
 
}

<div class="image-container" style="background: url('http://images.all-free-download.com/images/graphiclarge/beautiful_nature_landscape_02_hd_picture_166206.jpg') no-repeat; background-size: cover"> 
 
<div class="text-content"> 
 
    <h1>Lorem ipsum title</h1> 
 
    <p>Dummy contents</p> 
 
</div> 
 
</div>

Answer 3

如果你想玩border s，那么这将帮助你：

#header { 
 
\t background-image: url("http://via.placeholder.com/350x150"); 
 
\t height: 150px; 
 
\t width: 350px; 
 
\t position: relative; 
 
} 
 

 
#header::before { 
 
    content: ""; 
 
    width: 100%; 
 
    border-left: 350px solid red; 
 
    position: absolute; 
 
    box-sizing: border-box; 
 
    border-bottom: 65px solid transparent; 
 
} 
 

 
#header::after { 
 
    content: ""; 
 
    width: 100%; 
 
    border-right: 350px solid red; 
 
    position: absolute; 
 
    box-sizing: border-box; 
 
    border-top: 65px solid transparent; 
 
\t right: 0; 
 
\t bottom: 0; 
 
}

<div id="header"> 
 
</div>

如果你想知道如何工作，看看这个codepen由克里斯Coyier。

Answer 4

对于CSS，你可以使用

#myelement { 
background-image: url("image path"); 
height:x px; 
width:y px; 
position: relative; 
overflow: hidden; 
-webkit-transform: rotate(30deg); 
transform: rotate(30deg); 
}