有没有机会在html / css中获得这种形式？

Question

是否有机会在html / css中获得这种形式？ 我可以在Photoshop中做到这一点，但我希望文本区域可以动态更改

Answer 1

以下是获得相同外观的HTML和CSS：

.wrap {
  display: inline-block;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
  background-color: #fa5b34;
  text-align: center;
  color: #fff5ee;
  padding: 5px 10px;
}

.end {
  margin-top: 5px;
  background-color: #ebc944;
}

.desc {
  display: inline-block;
  border: #fff5ee solid 5px;
  padding: 5px 30px;
}

<span class="wrap">
        <div>
            SOME TITLE
        </div>
        <div class="desc">
            description, description,<br>
            description, description
        </div>
        <div class="end">
            THE END
        </div>
    </span>