クリップされた2つの画像の間隔を小さくする

Question

クリップパスを使用して2つの画像をクリップしています。結果は

すべては大丈夫ですが、私はちょうどこの

.clip-wrap { 
 
    display: inline; 
 
} 
 
.element { 
 
    -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 60% 100%); 
 
    clip-path: polygon(0 100%, 0 0, 100% 0, 60% 100%); 
 
} 
 
.element2 { 
 
    -webkit-clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); 
 
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); 
 
}

<div class="clip-wrap"> 
 
    <img src="http://karenmenezes.com/shapes-polygon/clip-demo.jpg" alt="demo-clip-css" class="element" width="150" height="150"> 
 
</div> 
 
<div class="clip-wrap"> 
 
    <img src="http://karenmenezes.com/shapes-polygon/clip-demo.jpg" alt="demo-clip-css" class="element2" width="150" height="150"> 
 
</div>

JsFiddle Link

のように、これらの画像間の間隔を減らしたいです

助けてください！おかげ

Answer 1

がちょうど

margin-right: -50px; 

が

より詳細な説明を.elementに追加： あなたはどちらか.elementまたは負与える負のマージン右与える.element2する余裕を左

Answer 2

イメージ間の距離は、イメージ自体ではなく、そのコンテナによって決まります。第二の容器にマイナスのマージンを持って

は、あなたが最初のイメージに近いそれをシフトすることができます。

.clip-wrap { 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
} 
 
.clip-wrap:nth-child(2) { 
 
    margin-left: -50px; 
 
} 
 
.element { 
 
    -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 60% 100%); 
 
    clip-path: polygon(0 100%, 0 0, 100% 0, 60% 100%); 
 
} 
 
.element2 { 
 
    -webkit-clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); 
 
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); 
 
}

<div class="clip-wrap"> 
 
    <img src="http://karenmenezes.com/shapes-polygon/clip-demo.jpg" alt="demo-clip-css" class="element" width="150" height="150"> 
 
</div> 
 
<div class="clip-wrap"> 
 
    <img src="http://karenmenezes.com/shapes-polygon/clip-demo.jpg" alt="demo-clip-css" class="element2" width="150" height="150"> 
 
</div>

Answer 3

あなたはラップ要素にCSSクリップパスのプロパティを適用する必要があります。次に、それらのラップ要素は、絶対的に、1つは左に、もう1つは右に配置されます。 これらのラップ要素はコンテナ内にあり、コンテナのwithがラップ要素間の間隔を決定します。

.clips-container { 
    position: relative; 
    width: 50%; 
} 
.clip-wrap { 
    display: inline-block; 
    position: absolute; 
} 
.clip-wrap1 { 
    -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 60% 100%); 
    clip-path: polygon(0 100%, 0 0, 100% 0, 60% 100%); 
    left: 0; 
} 

.clip-wrap2 { 
    -webkit-clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); 
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); 
    right: 0; 
} 

私が見て、あなたのバイオリンを変更した： https://jsfiddle.net/iamgutz/tfqdksnn/