Q

减少两个剪辑图像之间的间距

2016-09-22 130 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

相关问题