Html 如何带来谷歌地图'；我的框架是菱形的？

我想在我的网站上插入一个菱形的谷歌地图。 我试图在

iframe

的每个角落画一个白色（站点的背景色）

HTML和CSS如下所示：

正文{
背景：水鸭
}
.包装纸{
背景：红色
}
iframe{
背景：#000；
高度：556px；
宽度：556px；
}
.三角形{
位置：绝对位置；
}
.左上三角形{
排名：0；
右：0；
右边框：288px纯蓝色；
边框底部：288px实心透明；
}
.左下三角形{
底部：0；
右：0；
右边框：288px实心黄色；
边框顶部：288px实心透明；
}
.右下三角形{
底部：0；
左：0；
左边框：288px纯绿色；
边框顶部：288px实心透明；
}
.右上三角形{
排名：0；
左：0；
左边框：288px纯紫色；
边框底部：288px实心透明；
}

如果你不需要支持IE<9，你应该能够通过添加

.triangles{pointer events:none}

（支持，文档）

一个快速的谷歌搜索带来了这个问题：我已经把你的代码变成了一个可测试的代码片段，并且可以随意添加颜色，这样我们就可以准确地看到发生了什么。这与你的问题无关，但在我看来，你可能是想把三角形放在不同的位置，但这确实起到了作用。如果我试图用CSS遮罩隐藏它，它仍然是不可读取的。谢谢，很高兴它成功了！