CSS边框样式

Question

如何制作像我添加的图像一样的边框样式？ 看左下边框，边框有一些间隙。 我怎样才能通过CSS制作它？

This is the image

Answer 1

将边框放在主容器上，然后绝对放置＆＃34; Anna Jessica＆＃34;容器与白色背景覆盖边框。以下是基于您的图像的一般示例：

＆＃13;

＆＃13;

h2,
p {
  margin: 0px;
}

#test {
  border: solid 1px red;
  padding: 15px 15px 75px 15px;
  position: relative;
}

#bump-out {
  display: flex;
  position: absolute;
  bottom: -38px;
  left: 70px;
}

#bump-out-img {
  padding: 0px 25px;
  background: #FFF;
  position: relative;
}

#bump-out-img:before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: -10px;
  left: 12px;
  width: 75px;
  height: 75px;
  border: solid 1px red;
}

#bump-out-img img {
  display: block;
  position: relative;
}

#bump-out-title p {
  background: #FFF;
  padding: 0px 20px 0px 0px;
  display: inline-block;
}

＆＃13;

<div id="test">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo.</p>
  <div id="bump-out">
    <div id="bump-out-img">
      <img src="http://via.placeholder.com/75x75" />
    </div>
    <div id="bump-out-title">
      <h2>
        Some Name
      </h2>
      <p>
        Some Position
      </p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;