如何在CSS中获得这种标题样式

Question

嗨我想知道在css中使用这种结构设计，我想要背景颜色的背景和文字，但背景应该远离开头的文字。我附上了设计布局 谢谢

Answer 1

又快又脏：

＆＃13;

＆＃13;

h1 {
  position: relative;
  height: 2em;
  overflow: hidden;
}

h1:before {
  display: block;
  background-color: aqua;
  content: "";
  height: 1em;
  width: 100%;
  position: absolute;
  top: .5em;
  left: 5%;
  z-index: -1;
  transform: skewX(-15deg);
}

＆＃13;

<h1>
  Your Title Goes Here
</h1>

＆＃13;

＆＃13;

＆＃13;

Answer 2

HTML：

<div id="title">
  Your title goes here
</div>

CSS：

#title {
  position: absolute;
  top: 50px;
  left: 50px;
  font-size: 40px;
  font-family: Arial;
}

#title:after {
  position: absolute;
  top: 5px;
  left: 36px;
  content: "";
  width: 100%;
  height: 100%;
  background: cyan;
  z-index: -1;
  transform: skewX(-10deg);
}