html - CSS中文本后面的矩形形状

Question

我正在尝试使用 CSS 进行非常简单的设计。我有一个标题和一个段落。我需要在它后面加一个矩形，让文字溢出这个矩形。

是这样的:https://i.imgur.com/gDXw2fT.png

我尝试了很多不同的东西，我做出的一个解决方案是:

<div class="container">
  <div class="rectangle">

  </div>
  <div class="main">
    <h1>
      This is the title
    </h1>
    <p>This is a paragraph paragraphparagraphpararrrrrgrapaaaaaaaaaah.</p>
  </div>

</div>

.container {
  text-align: center;
  left: 0;
  right: 0;
 }

.rectangle {
  position: relative;
  width: 180px;
  height: 140px;
  margin: auto;
  z-index: -1;
  border: 5px solid lightgray;
}

.main {
  width: 300px;
  min-height: 60px;
  margin: auto;
  margin-top: -150px;
}

https://jsfiddle.net/bcsg6q03/3/

但我需要一个更好的解决方案。这个依赖于 margin-top: -150px;因此，如果我更改文本或矩形大小，一切都会移动。

有更好的方法吗？谢谢

Answer 1

使用 :before 和 left

.container {
  text-align: center;
  left: 0;
  right: 0;
 }

.main {
  position:relative;
  width: 300px;
  min-height: 60px;
  margin: auto;
  padding-top:15px;
}

.main:before {
  content:'';
  position: absolute;
  width: 220px;
  height: 140px;
  margin: auto;
  z-index: -1;
  border: 5px solid lightgray;
  left:40px;
}

<div class="container">
  <div class="main">
    <h1>
      This is the title
    </h1>
    <p>This is a paragraph paragraphparagraphpararrrrrgrapaaaaaaaaaah.</p>
  </div>

</div>