内嵌两个图像背景，对角线边框分开

本文介绍了内嵌两个图像背景，对角线边框分开的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正尝试在CSS3中获得此结果(不使用JS)-2张图片(左1张，右1张)由不垂直(有角度)的边框分开

I'm trying to have this result with CSS3 (not use JS)- 2 images (1 left, 1 right) seperate by a border not vertically (with an angle)

我想做的事:)

我做了很多尝试都没有成功.

I tried a lot of things with no success.

推荐答案

您可以使用剪辑路径

.right {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-clip-path: polygon(60% 0, 100% 0%, 100% 100%, 40% 100%);
  clip-path: polygon(60% 0, 100% 0%, 100% 100%, 40% 100%);
}

.left {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);
  clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);
}

border {
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
  height: 300px;
  background-color: black;
  -webkit-clip-path: polygon(59% 0, 61% 0, 41% 100%, 39% 100%);
  clip-path: polygon(59% 0, 61% 0, 41% 100%, 39% 100%);
}

<img class="left" src="https://picsum.photos/400/300?random">
<img class="right" src="https://picsum.photos/400/300">
<border>

这篇关于内嵌两个图像背景，对角线边框分开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！