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>

Answer 2

<div class="container">
    <h1>
      This is ddddddddddddthe title
    </h1>
    <p>This is a pardddddddddddddddddddddddddddddagraphaaaaah.</p>
</div>

.container {
  text-align: center;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1ODAiIGhlaWdodD0iNDAwIj4KIDxnPgogIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4KICA8cmVjdCBmaWxsPSJ0cmFuc3BhcmVudCIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjM5OCIgd2lkdGg9IjU3OCIgeT0iLTEiIHg9Ii0xIi8+CiAgPGcgZGlzcGxheT0ibm9uZSIgb3ZlcmZsb3c9InZpc2libGUiIHk9IjAiIHg9IjAiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIGlkPSJjYW52YXNHcmlkIj4KICAgPHJlY3QgZmlsbD0idXJsKCNncmlkcGF0dGVybikiIHN0cm9rZS13aWR0aD0iMCIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIvPgogIDwvZz4KIDwvZz4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8cmVjdCBpZD0ic3ZnXzEiIGhlaWdodD0iMzk2IiB3aWR0aD0iNTc2IiB5PSIyIiB4PSIyIiBzdHJva2Utd2lkdGg9IjEwIiBzdHJva2U9IiNjNWM1YzUiIGZpbGw9InRyYW5zcGFyZW50Ii8+CiA8L2c+Cjwvc3ZnPg==");
    background-size: 80% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    margin: 0 auto;
    padding: 20px 0;
 }

Answer 3

尝试这个小提琴

Fiddle Link

.main {
width: 300px;
height:140px;
min-height: 60px;
margin: auto;
border: 5px solid lightgray;
padding:10px;
word-wrap:break-word;
}

Answer 4

.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 {
}

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

Answer 5

首先将rectangle放在container内，分别命名为position: absolute和left:calc(50% - 90px)，其中90px是其width的一半 https://jsfiddle.net/qr7z5eou/

CSS中文字后面的矩形形状

5 个答案: