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スタックオーバーフローの問題以下しようとしたが、トップの答えでのアプローチ長方形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

あなたは擬似要素を使って、あなたが望むものを達成し、形状境界

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

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