一杯白水~ 2023-05-24 17:58 采纳率: 75%
浏览 28
已结题

css图片怎么画出曲形

请问怎么把一个图片 做成类似下面这种弧度 图片铺满这个曲形， 或者把一个div做成这样，里面的内容和图片一样铺满曲形

img

  • 写回答

1条回答 默认 最新

  • usp1994 2023-05-24 18:24
    关注

    img

    
<!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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

  • css将图片设置成圆形 css 前端
    2021-12-29 21:28
    回答 3 已采纳 使用css设置div的高度和宽度为相等值，将border-radius属性设置为50%，overflow属性设置为hidden。注意事项border-radius和overflow属性必须同时设置，缺
  • 前端开发 css图片大小的设置 css
    2023-03-27 15:31
    回答 4 已采纳 首先要确定div的宽高比和图片的宽高比一样，才可以在图片不变形的状态下撑满div，否则肯定会撑不满外层div设置宽高，内层img只需要设置width:100%或者height:100%就行，图片会自适
  • 使用前端css该如何打出此图 css html5 前端
    2023-03-01 16:48
    回答 4 已采纳 若有帮助，望给个采纳，谢谢！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
  • 前端怎么画三角形_css画出三角形和梯形
    2021-01-12 05:57
    薇陌念的博客 用CSS画三角形​ 我们都知道在html中，想要画出圆形，椭圆，矩形，都很简单，但是常见的三角形，梯形如何用纯css画出却较麻烦，许多时候都是直接用三角形的图片。本文将介绍如何用纯css画出三角形和梯形一、原理​ ...
  • css如何让背景图片完全显示 css3 html 前端
    2022-04-07 21:05
    回答 3 已采纳 background-size:100% 100%;这个是图片是全部显示，但有可能是变形 background-size:cover;这个是背景是全部覆盖，图片会撑开铺满
  • 开发前端css怎么快速取图片的十六进制 css html 前端
    2022-01-22 10:03
    回答 2 已采纳 纯色图片的图片颜色么？有很多截图软件都带有取色功能的，比如：Snipaste
  • css背景图片把文字内容盖住 css html5 前端
    2021-11-26 20:35
    回答 1 已采纳 你这个是 a标签的字体颜色和背景图片颜色一样都是白色 不是覆盖了 你改一下字体颜色就好了 color
  • CSS3图片悬停放大动画.zip
    2022-11-17 21:19
    在前端开发中，CSS3（层叠样式表第三版）为网页设计提供了丰富的动画效果，使得用户交互体验更加生动和吸引人。这个“CSS3图片悬停放大动画”压缩包包含了一个实例，展示了如何利用CSS3特性来实现当鼠标悬停在图片上...
  • HTML+CSS可以制作出弧形文字吗？ css3 html5 前端
    2021-12-31 16:38
    回答 2 已采纳 可以的。利用定位，再加上css3的变换属性，transform，roate（***deg）就可以实现。各种位置角度都能实现。给你写了个例子，你copy运行下就可以。如果对你有帮助，点下采纳一下，谢谢。
  • 前端CSS背景图片添加不上 css css3
    2020-04-07 18:55
    回答 4 已采纳 C:\Users\戴尔\Picture\zhong.jpg => C:/Users/戴尔/Picture/zhong.jpg
  • css前端设计文本垂直居中问题 css html 前端
    2022-04-08 14:45
    回答 2 已采纳 很多办法，最简单是用footer的padding，设置上下一样的padding，他就居中了。行高也可以，但是要多包一层，外层设置为footer高度一样的行高，内存设置为每行固定的一个高度。还有flex
  • CSS3图片形状遮罩动画效果.zip
    2022-11-17 21:19
    在前端开发领域，CSS3（层叠样式表第三版）为网页设计带来了许多创新和增强功能，其中之一就是图片形状遮罩动画效果。这个压缩包"CSS3图片形状遮罩动画效果.zip"包含了一些示例，展示了如何利用CSS3来创建动态的、...
  • css3中动画方面报错 css3 前端
    2023-04-12 21:37
    回答 1 已采纳 animation上一行结尾的 分号不对 应该是应为格式 你那个好像是中文格式的 符合一个别的分号
  • 前端，可视化大屏，纯css3+svg动画实现流转动画
    2022-06-21 09:30
    开发者可能使用SVG路径（path）元素来绘制线条和形状，结合CSS3动画，使得图形元素在指定路径上流动，呈现出动态流转的效果。 3. **流程图**: 在数据可视化大屏中，流程图是一种有效的方法，用于表示步骤、任务间的...
  • css+javascript 实现扇形导航动画效果
    2023-06-08 16:43
    在网页设计中，动态效果和交互性是提升用户体验的关键因素之一。"CSS+JavaScript 实现...通过研究和理解这些代码，开发者可以深入学习如何结合CSS和JavaScript来创建动态的网页元素，进一步提升自己的前端开发技能。
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 6月2日
  • 已采纳回答 5月25日
  • 创建了问题 5月24日

悬赏问题

  • ¥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