div四个角是三角形怎么实现,如图

div四个角是三角形怎么实现,如图,我要在框中放内容,框里的内容不会跑出去,试了背景图好像不行,四个角没办法处理,
图片描述

阅读 6k
5 个回答

内部的东西要和角落隔开的话,CSS padding属性了解一下?

简单的边角还可以用伪类或者div旋转处理,但是你的这个示例的话

clipboard.png

这一块的图案过于复杂,比较好的办法是背景图+padding。实在想炫技弄点svg也随意。

我大概弄了一个Demo,不知道是不是你所说的意思

在地图上层加一个遮罩, 直接盖在地图上方,背景图像这样 图片描述

其实效果是这样,可以看到,整个div后面是个背景图,里面需要放个地图,然后楼上两位的回答很不错,但是好像还是不能实现这个效果。。。。。
图片描述

做成背景图呢

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题