RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1284076
Accepted
word
word
Asked:2022-05-20 16:40:10 +0000 UTC2022-05-20 16:40:10 +0000 UTC 2022-05-20 16:40:10 +0000 UTC

在css上引用图片

  • 772

如何在css中制作图片中的引用块?据我了解,您可以为块设置边框半径,但是如何使具有非锐利图案的那个角在下角变圆?里面会有文字 在此处输入图像描述

css3
  • 2 2 个回答
  • 10 Views

2 个回答

  • Voted
  1. Best Answer
    Monkey Mutant
    2022-05-23T18:47:55Z2022-05-23T18:47:55Z

    用填充压缩背景 svg

    在 inkscape 中绘制 Svg =>

    .chat {
      width: 500px;
      min-heigth: 150px;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='16 102 112 36' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='m120.73 102.41-96.629 1e-5c-6.767 0.0671-6.5995 3.202-7.143 6.7462l0.19842 12.897c0.26448 4.251-0.28188 7.5569 5.7541 8.1351l89.684-0.39683c3.9156 2.4626 4.9583 5.1645 14.683 7.143-2.1042-2.8309-3.9905-5.6255-2.9762-7.9367 2.7857-0.71967 3.4043-2.4159 3.5715-5.7541l-0.39683-15.675c-0.11111-2.5985-2.0477-5.1089-6.7462-5.1588z' fill='%23fff' stroke='%23000' stroke-width='.02px'/%3E%3C/svg%3E%0A");
      background-size: cover;
      filter: drop-shadow(0 0 40px lightblue);
      padding-top: 10px;
      padding-bottom: 100px;
    }
    
    .chat p {
      width: 90%;
      margin: auto;
    }
    <div class="chat">
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse ipsa totam voluptas doloribus numquam assumenda ad culpa aspernatur molestias sequi optio sunt praesentium necessitatibus perspiciatis, est debitis. Recusandae, labore necessitatibus non dolor
        vel eaque facere minima reiciendis rerum, aperiam incidunt blanditiis earum alias
      </p>
    </div>

    • 1
  2. Air
    2022-05-20T18:24:49Z2022-05-20T18:24:49Z

    div{
    position:relative;
    width:300px ;
    height:100px ;
    background:red;
    border-radius:20px;
    }
    
    
    div::before{
    position:absolute;
    content:"";
    width:50px ;
    height:50px ;
    border-radius:50%;
    background:red;
    left:auto;
    top:auto;
    right:-3px;
    bottom:-38px;
    }
    div::after{
    position:absolute;
    content:"";
    width:40px ;
    height:40px ;
    border-radius:50%;
    background:white;
    left:auto;
    top:auto;
    right:-10px;
    bottom:-34px;
    }
    <div></div>

    • 0

相关问题

  • 如何用线条绘制立体图并进行动画处理?

  • 如何将心形图像添加到按钮?

  • 如何布置菜单

  • 如何将转换应用于按钮内的文本?

  • 如何在网格中制作滚动项目?

  • 图片与文本重叠的矩形

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    表格填充不起作用

    • 2 个回答
  • Marko Smith

    提示 50/50,有两个,其中一个是正确的

    • 1 个回答
  • Marko Smith

    在 PyQt5 中停止进程

    • 1 个回答
  • Marko Smith

    我的脚本不工作

    • 1 个回答
  • Marko Smith

    在文本文件中写入和读取列表

    • 2 个回答
  • Marko Smith

    如何像屏幕截图中那样并排排列这些块?

    • 1 个回答
  • Marko Smith

    确定文本文件中每一行的字符数

    • 2 个回答
  • Marko Smith

    将接口对象传递给 JAVA 构造函数

    • 1 个回答
  • Marko Smith

    正确更新数据库中的数据

    • 1 个回答
  • Marko Smith

    Python解析不是css

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5