Q

減少兩個剪輯圖像之間的間距

2016-09-22 66 views 2 likes

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>

請幫忙！由於

2016-09-22 amansoni211

+0

你有與第二ELEMENTI負'保證金left'試過嗎？ – phaberest

+0

約50px應該做的伎倆。 https://jsfiddle.net/vd5ezk7z/2/ – Serlite

+1

請注意，問題中的代碼在IE11，Edge或FF中不起作用。它適用於Chrome。（沒有測試Safari。） –

A

回答

3

只需添加

margin-right: -50px;

到.element

更多的解釋：你一個要麼給出一個否定的保證金權利.element或給予負面的利潤率左到.element2

2016-09-22 19:20:33 Visrozar

3

圖像之間的距離取決於它們的容器，而不是圖像本身。

在第二容器上的負餘量，可以更靠近它移動到第一圖像。

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

2016-09-22 19:26:54

1

您需要的CSS夾路徑屬性適用於包裝元素。然後這些包裹元素將被絕對定位，一個向左，一個向右。這些包裝元素位於容器內部，而容器的容器確定包裝元素之間的間距。

.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/

2016-09-22 19:33:07

相關問題