Jedi Hongbin 2021-08-19 07:15 采纳率: 0%
浏览 308
已结题

html css怎么实现这种弧度效果

img
用 svg 或者canvas 还是用几个div 图中是使用 clip-path 裁剪 的 想知道有没有好一点的方法

  • 写回答

8条回答 默认 最新

  • CSDN专家-Fay 2021-08-19 08:27
    关注

    可以用一些CSS实现比较接近的效果，但是需要图中效果，可能需要PS做一些背景图片会好一些：

    <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  
  <title>Document</title>
  <style>
  
      #m{
          position:relative;
        width:500px;
      }

    #sp1{
        height:60px;
        width:300px;
        background-color:black;
        border-top-right-radius: 60px; 
    }
    #sp2{
        position:absolute;
        right:5px;
        bottom:0px;
        height:25px;
        width:200px;
        background-color:black;
    }
  </style>
 </head>
 <body>
  <div id="m">
    <div id="sp1">111</div>
    <div id="sp2">222</div>
  </div>
 </body>
</html>

    img

    评论

报告相同问题？

问题事件

  • 系统已结题 8月27日
  • 创建了问题 8月19日

悬赏问题

  • ¥50 易语言把MYSQL数据库中的数据添加至组合框
  • ¥20 求数据集和代码#有偿答复
  • ¥15 关于下拉菜单选项关联的问题
  • ¥20 java-OJ-健康体检
  • ¥15 rs485的上拉下拉，不会对a-b<-200mv有影响吗，就是接受时，对判断逻辑0有影响吗
  • ¥15 使用phpstudy在云服务器上搭建个人网站
  • ¥15 应该如何判断含间隙的曲柄摇杆机构，轴与轴承是否发生了碰撞？
  • ¥15 vue3+express部署到nginx
  • ¥20 搭建pt1000三线制高精度测温电路
  • ¥15 使用Jdk8自带的算法，和Jdk11自带的加密结果会一样吗，不一样的话有什么解决方案，Jdk不能升级的情况