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

谢谢你回答这个问题

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

这是我现在的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>

标题

---

非常感谢您的努力。

使用css是可能的，但是如果您在photoshop或其他东西中添加边框并将其插入页面，可能会更容易。

使用css是可能的，但如果你在photoshop或其他东西中添加边框并将其插入页面，可能会更容易些。注意：我在这些示例中使用的形状与问题中的形状不匹配。主要是因为问题的形状没有深入到角落。另一个不同之处是，我使用了一个固定的高度来定义“边界”（它在每个地方垂直测量5px），而问题中的边界似乎有一个固定的宽度，考虑到“笔划”上的角度。这些细节使多边形的构造更加复杂，但不会使所提出的方法无效

---

CSS剪辑路径 你想做的事可以用电脑来完成。它本身将在图像中生成所需的剪切，也将在代表边框的div中生成剪切

需要进行一些调整才能将对象放置在彼此的顶部（剪辑路径不影响框大小）

img{
宽度：250px；
高度：250px；
-webkit剪辑路径：多边形（100%0、100%100%、75%75%、075%、0）；
剪辑路径：多边形（100%0、100%100%、75%75%、0.75%、0.0）；
显示：块；
}
.切边{
宽度：250px；
高度：计算（250px*0.25）；
背景色：红色；
-webkit剪辑路径：多边形（75%0，100%calc（100%-5px），100%100%，75%5px，05px，0）；
剪辑路径：多边形（75%0，100%calc（100%-5px），100%100%，75%5px，05px，0）；
位置：相对位置；
顶部：calc（250px*-0.25）；
}
.x-最近发布的帖子-内容{
位置：相对位置；
顶部：calc（250px*-0.5）；
}

标题

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

---

CSS剪辑路径 你想做的事可以用电脑来完成。它本身将在图像中生成所需的剪切，也将在代表边框的div中生成剪切

需要进行一些调整才能将对象放置在彼此的顶部（剪辑路径不影响框大小）

img{
宽度：250px；
高度：250px；
-webkit剪辑路径：多边形（100%0、100%100%、75%75%、075%、0）；
剪辑路径：多边形（100%0、100%100%、75%75%、0.75%、0.0）；
显示：块；
}
.切边{
宽度：250px；
高度：计算（250px*0.25）；
背景色：红色；
-webkit剪辑路径：多边形（75%0，100%calc（100%-5px），100%100%，75%5px，05px，0）；
剪辑路径：多边形（75%0，100%calc（100%-5px），100%100%，75%5px，05px，0）；
位置：相对位置；
顶部：calc（250px*-0.25）；
}
.x-最近发布的帖子-内容{
位置：相对位置；
顶部：calc（250px*-0.5）；
}

标题

@Theraot i可能与之重复，但仅在尖端方面类似。它有一个侧面有切口的div。但是我想要一条在边缘弯曲的线。可能是@Theraot i的复制品，但它只与最尖端相似。它有一个侧面有切口的div。但是我想要一条在边缘弯曲的线。