如何制作不规则的CSS边框

Question

我正在尝试使用CSS做到这一点：

使用白色背景很容易，但是如果它有背景图像，该怎么办呢？这就是我的意思：

我实际上是绝对将div放在另一个内部：

<div class="main-div">
  <div class="main-div-overlay-text">
    SOME TEXT
  </div>
  SOME TEXT HERE
</div>

.main-div {
  position: relative;
  width: 200px;
  height: 150px;
  border: 2px solid white;
}

.main-div-overlay-text {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top:-10px;
}

Answer 1

尝试使用<fieldset>和<legend>。

body {
  background: grey;
}
fieldset {
  border: 1px solid white;
  color: white;
  text-align: center;
  width: 200px;
}
legend {
  padding: 0 10px;
}

<fieldset>
  <legend>Title</legend>
  <p>Text</p>
</fieldset>

要使图例在Firefox中居中，请使用 <legend align="center">