在图像后添加一侧倾斜边框样式

Question

感谢您提出这个问题。

我想添加一个边/线，它有一个侧边倾斜，用作图像和标题之间的分隔线。以下是截图。

这是我现在拥有的HTML

<div class="entry-wrap">
<img class="x-img x-img-thumbnail" src="{image-src}" alt="Place Alt Text Here">
<div class="cut-border"></div>
<div class="x-recent-posts-content">
    <h5>Title</h5>

</div>

非常感谢您的努力。

Answer 1

它可以使用css，但如果你在photoshop或其他东西中添加了这个边框并将其插入你的页面可能会更容易

Answer 2

注意：我在这些示例中使用的形状与问题中的形状不匹配。主要是因为问题的形状不会落到角落。另一个不同之处在于我使用固定高度来定义“边界”（它在任何地方垂直测量5px），而问题中的那个似乎具有固定宽度，其考虑了“笔画”上的角度。这些细节使得多边形的构造更加复杂，但不会使所提出的方法无效。

CSS Clip-Path

您可以使用CSS Clip-Path完成所需操作。其中，它本身将在图像中进行所需的切割，并且还会在div中进行切割。

必须进行一些调整才能将对象置于彼此顶部（剪辑路径不会影响框大小）。

img {
  width:250px;
  height:250px;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 75% 75%, 0 75%, 0 0);
  clip-path: polygon(100% 0, 100% 100%, 75% 75%, 0 75%, 0 0);
  display:block;
}

.cut-border {
  width:250px;
  height: calc(250px * 0.25);
  background-color: red;
  -webkit-clip-path: polygon(75% 0, 100% calc(100% - 5px), 100% 100%, 75% 5px, 0 5px, 0 0);
clip-path: polygon(75% 0, 100% calc(100% - 5px), 100% 100%, 75% 5px, 0 5px, 0 0);
  position:relative;
  top: calc(250px * -0.25);
}

.x-recent-posts-content {
  position:relative;
  top: calc(250px * -0.5);
}

<div class="entry-wrap">
<img src="http://lorempixel.com/250/250/city/" alt="lorempixel"><div class="cut-border"></div>
<div class="x-recent-posts-content">
  <h5>Title</h5>
</div>
</div>

我看到的一个缺点是它没有像素完美切割（你可以看到碎片完全不匹配，根据缩放级别，这种效果可能会或者不可见）。可以隐藏它，我在上面的例子中没有做任何这些。

另一个缺点是在IE或Edge中不起作用。

请参阅browser support。

SVG

我们不是试图用CSS来解决这个问题，而是使用SVG来实现这一目标：

.x-recent-posts-content {
  position:relative;
  top: calc(250px * -0.25);
}

<svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="img" patternUnits="userSpaceOnUse" width="250" height="250">
       <image xlink:href="http://lorempixel.com/250/250/city/" x="0" y="0" width="250" height="250" />
    </pattern>
  </defs>
  <polygon fill="url(#img)" points="250,0 250,250, 187.5,187.5 0,187.5 0,0"></polygon>
  <polygon fill="#f00" points="187.5,187.5 250,245 250,250 187.5,192.5 0,192.5 0,187.5" />
</svg>
<div class="x-recent-posts-content">
    <h5>Title</h5>
</div>

请参阅browser support。