主页 / 问题 / 1284076
Accepted
word
Asked:2022-05-20 16:40:10 +0800 CST2022-05-20 16:40:10 +0800 CST

在css上引用图片

  • 772

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

css3

2 个回答

  1. Best Answer

    用填充压缩背景 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. 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

相关问题