Html 通过CSS设置背景图像边框样式

如何使背景图像看起来像这样

---

您可以通过使用位置倾斜的

伪元素来实现此效果


正文{
身高：100%；
背景：#fff；
字体系列：无衬线；
}
.图像容器{
背景：#fff；
位置：相对位置；
z指数：1；
高度：500px；
最大宽度：500px；
保证金：0自动；
颜色：#fff；
}
.image容器：之前，.image容器：之后{
背景：#fff；
内容：''；
显示：块；
身高：30%；
左：0；
位置：绝对位置；
右：0；
z指数：-1；
-webkit背面可见性：隐藏；
}
.图像容器：之前{
排名：0；
-webkit变换：歪斜（-3deg）；
变换：歪斜（-3deg）；
-webkit转换源：-100%0；
变换原点：-100%0；
}
.图像容器：之后{
底部：0；
-webkit变换：歪斜（-3deg）；
变换：歪斜（-3deg）；
-webkit转换来源：100%；
变换原点：100%；
}
.文本内容{
位置：绝对位置；
底部：30%；
左：30px；
}

同侧眼睑
虚拟内容

如果您想玩
边框
s，这将帮助您：


#标题{
背景图像：url（“http://via.placeholder.com/350x150");
高度：150像素；
宽度：350px；
位置：相对位置；
}
#标题：：之前{
内容：“；
宽度：100%；
左边框：350px实心红色；
位置：绝对位置；
框大小：边框框；
边框底部：65px实心透明；
}
#标题：：之后{
内容：“；
宽度：100%；
右边框：350px纯红；
位置：绝对位置；
框大小：边框框；
边框顶部：65px实心透明；
右：0；
底部：0；
}

对于CSS，您可以使用

#myelement {
background-image: url("image path");
height:x px;
width:y px;
position: relative;
overflow: hidden;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}

据我所知，有三种方法可以做到这一点：

旧方法-在
：之后和
：之前使用顺序


.bg框{
位置：相对位置；
背景：url(https://static.pexels.com/photos/20974/pexels-photo.jpg)无重复100%；
宽度：500px；
高度：400px；
;
显示：内联块；
}
.背景框：在，
.bg框：之前{
内容：''；
位置：绝对位置；
}
.bg框：之前{
顶部：0px；
左：0px；
右边框：500px实心rgba（2212212210）；
边框顶部：60px实心#fff；
}
.背景框：在{
底部：0px；
左：0px；
右边框：500px实心#fff；
边框顶部：60px实心rgba（2432452460）；
}
非常感谢@weBer