问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
离丶花香
    1539

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

    csshtmljavascript
    阅读 6k
    5 个回答
    得票最新
    头像
    mscststs
      2.6k1322
      ✓ 已被采纳

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

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

      clipboard.png

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

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

      头像
      Justin
        1.4k41232
        头像
        你好路人甲
          44549

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

          头像
          离丶花香
            1539

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

            头像
            前端荣耀
              1.6k1112

              做成背景图呢

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