请问怎么把一个图片 做成类似下面这种弧度 图片铺满这个曲形, 或者把一个div做成这样,里面的内容和图片一样铺满曲形
1条回答 默认 最新
- usp1994 2023-05-24 18:24关注
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS 凹形矩形示例</title> <style> /* 自定义样式 */ .concave-rect { width: 200px; height: 100px; background-color: #f00; position: relative; overflow: hidden; } /* 上曲线的样式 */ .concave-rect:before { content: ''; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; box-sizing: border-box; position: absolute; top: -10px; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* 上曲线的样式 */ .concave-rect::after { content: ''; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; box-sizing: border-box; position: absolute; bottom: -110px; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style> </head> <body> <div class="concave-rect"></div> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 请问python的selenium怎么设置referer
- ¥15 请教下, VS QT 环境下, QTOPCUA 的源文件报错,这种情况咋查呢 ?
- ¥20 UNITY webgl关于文档的上传和下载问题
- ¥15 安霸cv22 + rtl8211f 千兆,udp传输丢包
- ¥15 关于区块链和边缘环境搭建的相关问题
- ¥15 windows远程桌面断卡重连软件卡顿问题
- ¥30 Unity 实现扫描效果
- ¥15 HbuilderX检测不到安卓模拟器
- ¥15 这个main已经在filename.obj中定义是什么错 C语言
- ¥15 关于#linux#的问题:exsi8.0系统 怎么更改web访问端口,不用80、443