Css 具有圆角和背景图像的菱形形状

我需要做到这一点：

请注意，容器已旋转，但图片未旋转

现在我做到了：

div.img{
位置：相对位置；
溢出：隐藏；
宽度：320px；
}
部门经理经理经理{
显示：块；
宽度：100%
}
第img段跨度{
位置：绝对位置；
内容：“；
宽度：75%；
身高：75%；
变换：旋转（133度）；
背景：白色
}
第三部分{
前-36%；
左-36%
}
分区img span.bl{
底部-36%；
左-36%
}
div.img span.br{
底部-36%；
右图：-36%
}
第img部分span.tr{
前-36%；
右图：-36%
}

---

只需对父DIV使用CSS3转换

div.img{
位置：相对位置；
溢出：隐藏；
宽度：150px；
高度：150像素；
利润率：50像素；
变换：旋转（45度）；
-ms变换：旋转（45度）；/*IE 9*/
-moz变换：旋转（45度）；/*Firefox*/
-webkit变换：旋转（45度）；/*Safari和Chrome*/
-o变换：旋转（45度）；/*Opera*/
边界半径：8px；
}
部门经理经理经理{
显示：块；
宽度：350px；
变换：旋转（-45度）；
-ms变换：旋转（-45度）；/*IE 9*/
-moz变换：旋转（-45度）；/*Firefox*/
-webkit变换：旋转（-45度）；/*Safari和Chrome*/
-o变换：旋转（-45度）；/*Opera*/
边界半径：8px；
利润上限：-100px；
}

---

这可能是一个开始

将伪元素的宽度/高度设置为其对角线(√ 2. ×宽度=1.4142…），然后将其调整为显示在中心

div.img{
位置：相对位置；
溢出：隐藏；
显示：内联块；
左边距：50像素；
边缘顶部：50px；
宽度：220px；
高度：220px；
变换：旋转（45度）；
边界半径：10%；
}
部门经理：之前{
位置：绝对位置；
前-21%；
左-21%；
宽度：142%；
身高：142%；
内容：“；
变换：旋转（-45度）；
背景图片：url(http://lorempixel.com/320/320/nature/4);
溢出：隐藏；
}
img2分部{
位置：相对位置；
溢出：隐藏；
显示：内联块；
左边距：50像素；
边缘顶部：50px；
宽度：110px；
高度：110px；
变换：旋转（45度）；
边界半径：10%；
}
部门img2 img{
位置：绝对位置；
前-21%；
左-21%；
宽度：142%；
身高：142%；
变换：旋转（-45度）；
溢出：隐藏；
}

---

您可以使用css

剪辑路径

.wrapper{
背景色：#FEF7E4；
显示：内联块；
填充：10px；
}
部门经理{
位置：相对位置；
溢出：隐藏；
宽度：320px；
-webkit剪辑路径：圆形（中心155px）；
}
部门经理经理经理{
显示：块；
宽度：100%；
-webkit剪辑路径：多边形（50%0%、100%50%、50%100%、0%50%）；
剪辑路径：多边形（50%0%，100%50%，50%100%，0%50%）；
}

---

CSS3

剪辑路径

无疑是最灵活的方法-您可以根据需要使用SVG定义图像剪辑

这是一个例子。但是，默认情况下，它不提供圆角正方形，因此您可能需要编写自己的SVG（尽管这并不困难）

如果你想更深入地了解内心，请阅读

请注意：并非所有主要浏览器都支持此功能，请检查浏览器兼容性

这里有一个关于你的帖子的例子：

html，正文{
保证金：0；
填充：0；
}
img{
宽度：200px；
高度：200px；
-webkit剪辑路径：url（#svgPath）；
剪辑路径：url（#svgPath）；
}

.content{
背景色：#FEF7E4；
显示：内联块；
填充：10px；
}
部门经理{
位置：相对位置；
溢出：隐藏；
宽度：150px；
高度：150像素；
利润率：50像素；
变换：旋转（45度）；
-ms变换：旋转（45度）；/*IE 9*/
-moz变换：旋转（45度）；/*Firefox*/
-webkit变换：旋转（45度）；/*Safari和Chrome*/
-o变换：旋转（45度）；/*Opera*/
边界半径：8px；
}
部门经理经理经理{
显示：块；
宽度：350px；
变换：旋转（-45度）；
-ms变换：旋转（-45度）；/*IE 9*/
-moz变换：旋转（-45度）；/*Firefox*/
-webkit变换：旋转（-45度）；/*Safari和Chrome*/
-o变换：旋转（-45度）；/*Opera*/
边界半径：8px；
利润上限：-100px；
}

试试这个——绝对定位的遮罩覆盖在绝对定位的图像上

.image容器{
位置：相对位置；
溢出：隐藏；
宽度：320px；
}
.图像容器img{
显示：块；
宽度：100%；
z指数：1；
}
.图像容器.遮罩{
z指数：2；
位置：绝对位置；
宽度：70%；
身高：70%；
背景色：rgba（0,0,0,0）；
边框：150px实心#eeeeee；
边界半径：160像素；
顶部：-102px；
左：-102px；
变换：旋转（45度）；
-ms变换：旋转（45度）；
/*IE 9*/
-moz变换：旋转（45度）；
/*火狐*/
-webkit变换：旋转（45度）；
/*狩猎与铬*/
-o变换：旋转（45度）；
/*歌剧院*/
}

---

如果您计划使用svg，为什么不立即使用它呢。你也不需要要求你的设计师来做，你可以内联编码，控制圆角，形状。。。而且它是可伸缩的：

svg{显示：块；宽度：30%；高度：自动；}

---

也许我遗漏了什么，但只需使用背景图像即可

.container{
填充：4rem；
背景图片：url(https://unsplash.it/800);
背景尺寸：封面；
}
.盒子{
位置：相对位置；
溢出：隐藏；
宽度：8雷姆；
高度：8雷姆；
边界半径：1em；
背景：#000；
变换：旋转（45度）；
}
.盒子：之后{
内容：''；
位置：绝对位置；
顶部：-1.5雷姆；
左：-1.5雷姆；
权利：-1.5雷姆；
底部：-1.5雷姆；
背景图片：url(https://unsplash.it/500);
背景尺寸：封面；
变换：旋转（-45度）；
}
.box:悬停：在{
背景#ffff00；