使用CSS中的背景图像在div的顶部添加三角形

Question

我试图用背景图片为我的div添加一个点/三角形，但我正在努力创造足够的空白空间。

这就是我要去的地方：

这是我到目前为止所拥有的：

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

.bg {
  position: relative;
  background: url('http://i.imgur.com/W27LCzB.jpg');
  background-size: cover;
  width: 100%;
  padding-top: 50px;
  height: 200px;
}

.bg:before {
  content:'';
  border-left: 50px solid #fff; 
  border-right: 50px solid #fff; 
  border-bottom: 50px solid transparent; 
  position:absolute; 
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 0;
}

我尝试了this Stack Overflow问题，但顶部答案中的方法会创建来自矩形div末端的边框。

Answer 1

可以使用另一个div实现您的设计。希望你会喜欢它:)）

.bg {
  position: relative;
  background: url('http://i.imgur.com/W27LCzB.jpg');
  background-size: cover;
  width: 100%;
  padding-top: 50px;
  height: 200px;
}

.bg:before {
  content:'';
  border-left: 50px solid #fff; 
  border-right: 50px solid #fff; 
  border-bottom: 50px solid transparent; 
  position:absolute; 
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 0;
}

.helper {
  position: absolute;
  height: 50px;
  top: 0;
  left: 0;
  right: 0;
}

.helper:before, .helper:after {
  content: "";
  background: white;
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% - 50px);
}

.helper:before {left: 0;}
.helper:after {right: 0;}

<div class="bg">
  <div class="helper"></div>
</div>

Answer 2

您可以通过使用伪元素实现所需，并将它们倾斜以获得形状边框

＆＃13;

＆＃13;

.bg {
  position: relative;
  background: url('http://i.imgur.com/W27LCzB.jpg');
  background-size: cover;
  width: 100%;
  padding-top: 50px;
  height: 200px;
  overflow: hidden;
}

.bg:before {
  content: '';
  background: #fff;
  position: absolute;
  top: 0;
  right: calc(50% + 20px);
  width: 150%;
  height: 50px;
  transform: skewX(-40deg);
}

.bg:after {
  content: '';
  background: #fff;
  position: absolute;
  top: 0%;
  left: calc(50% + 20px);
  width: 150%;
  height: 50px;
  transform: skewX(40deg);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;