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>

Answer 2

使用线性渐变的多个背景并调整背景大小：

.box {
  height:150px;
  background:
   /*The line*/
   linear-gradient(blue,blue) 10px 80%/150px 2px,
   /*The background*/
   linear-gradient(blue,blue) right top/calc(100% - 80px) 20px,
   linear-gradient(grey,grey) right/calc(100% - 80px) 100%;
   
  background-repeat:no-repeat;
  border:1px solid;
  padding-left:100px;
}

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

Answer 3

使用box-shadow inset的解决方案，如果您的蓝线不是背景的一部分，则它可以工作，因为box-shadow inset隐藏了其中的一部分

div{
  background-color : #ccf;
  box-shadow: inset 25px 0 0 0 white; 
  height: 50px;
  color: black;
  border : 1px solid;
}

<div>
Here we have some text
</div>

说明： box-shadow: inset 25px 0 0 0 black;

inset：位于框中
25px：在X上的位置，因此我们将阴影向右移动25px，这在左侧提供了25px的边框
0 0 0：在Y上的位置，出现并模糊
black：颜色，在示例中使用white

CSS属性裁剪颜色背景

3 个答案: