背景图像边框通过CSS造型

Question

如何使背景图像看起来像这样

Answer 1

据我所知，有三种方法可以做到这一点 -

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>

1. 使用 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>

1. 将 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>

您可以在项目中使用preffered方法。希望这对你理解这个技巧很有帮助。

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 {
	background-image: url("http://via.placeholder.com/350x150");
	height: 150px;
	width: 350px;
	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;
	right: 0;
	bottom: 0;
}

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

如果您想知道这是如何运作的，请查看Chris Coyier的codepen。

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