html - CSS 属性裁剪颜色背景

Question

我想在 CSS 中像这样只在一侧裁剪背景颜色:

进入这个:

我找到了 background-clip 属性，但对我来说似乎毫无意义，你对我如何实现这一点有什么想法吗？这可能是我不知道的 CSS 属性。感谢您的帮助

Answer 1

移动“背景”本身可以简单地通过使用margin-left(下面的示例)来完成，但是我无法帮助您解决介绍文本中的行，我自己在背景的左边和外面。显然示例中的颜色是错误的，但您应该明白这一点。

body {
  font-family: Arial;
  overflow: hidden;
}

.box {
  height: 600px;
  background-color: lightpink;
  padding-left: 50px;
  border-top: 50px solid gray;
  margin-left: 150px;
  margin-top: -10px;
  margin-right: -10px;
}

<div class="box">
  <h1>Introduction</h1>
</div>