所需的五角大楼形状，具有正确方向的CSS和HTML

如果没有

-webkit clip path

，我该如何制作这种类型的pentagone，因为它在大多数浏览器（如Firefox、IE9）中都不起作用。

我的代码：

div{
宽度：150px；
高度：150像素；
背景：#1e90ff；
-webkit剪辑路径：多边形（0%0%、75%0%、100%50%、75%100%、0%100%）；
剪辑路径：多边形（0%0%、75%0%、100%50%、75%100%、0%100%）；
}
/*演示中心*/
html，正文{
身高：100%；
}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

---

您可以直接使用

svg

---

更新

您可以使用来破解背景图像

*{
框大小：边框框；
填充：0；
保证金：0
}
：根{
背景：红色
}
div{
保证金：20px自动；
背景：url(http://i.imgur.com/mI2OFTB.jpg);
背景尺寸：封面；
宽度：300px；
高度：200px；
位置：相对位置；
颜色：红色
}
div:before，div:after{
内容：“；
位置：绝对位置；
颜色：当前颜色；
右：0；
左边框：100px实心透明
}
部门：以前{
边框底部：100px纯色；
底部：0
}
部门：之后{
边框顶部：100px纯色
}

#五角大楼{
边缘顶部：45像素；
位置：相对位置；
宽度：54px；
边框宽度：50px 24px 0px 0px；
边框样式：实心；
边框颜色：红色透明；
}
#五角大楼：以前{
内容：“；
位置：绝对位置；
身高：0；
宽度：54px；
顶部：-85px；
边框宽度：0px 24px 35px 0px；
边框样式：实心；
边框颜色：透明红色；
}

您可以使用以下方法：

• 将主元件旋转45度。添加

  溢出：隐藏到它

• 添加一个伪元素并取消转换它。将其正确放置在主元件内

将鼠标悬停在图像上以查看其工作原理：

和片段：

正文{
背景：url(http://lorempixel.com/640/480);
}
div{
高度：200px；
宽度：200px；
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
变换：旋转（-45度）；
位置：相对位置；
溢出：隐藏；
顶部：50px；
左：50px；
}
部门：以前{
内容：“；
位置：绝对位置；
左：100px；
高度：141px；
宽度：212px；
显示：块；
背景：url(http://i.imgur.com/mI2OFTB.jpg);
背景大小：100%；
变换原点：0%0%；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
变换：旋转（45度）；
}
/*只是为了演示一下工作原理*/
div:悬停{
溢出：可见；
背景：rgba（25,50,75,0.6）；
}

---

@Harry我的问题是方向，所以我在这里贴了一个铁杆粉丝。他几乎到处都在用它。但他在每一个答案中都强调了一点——浏览器支持你的最后一个片段是有效的，但我无法设置bg@chipChocolate。py@chipChocolate.pydiv{position:relative；width:125px；height:150px；background:url（imag2es.jpg）；}现在这只能通过svg实现。对于webkit浏览器，使用

剪辑路径

对于其他浏览器，使用SVG@chipChocolate.pyBG不是根据五角大楼设置的。你的回答对我很有帮助，但我还想问一件事，我如何在你的照片上设置背景图片pentagon@chipChocolate.py有可能你为什么这么说？看看这个@Tambo-太棒了！您应该将其添加到您的答案中。：）@Tambo-当我说CSS不可能时，我的意思是“边界上的背景图像”不是一个

div

元素，我根本没有冒犯的意思。如果是冒犯，我道歉。：）@坦博-。不完全是OP要求的。你的回答对我很有帮助，但我还想问一件事，我如何在你的五边形上设置背景图片有没有通过CSS设置背景图片的选项