CSS 属性裁剪颜色背景答案

【问题标题】：CSS property crop color backgroundCSS 属性裁剪颜色背景
【发布时间】：2018-07-19 09:16:15
【问题描述】：

我想在 CSS 中实现对一侧背景颜色的裁剪，如下所示：

进入这个：

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

【问题讨论】：

你的代码？ (o_O)

标签： html css colors background

【解决方案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>

【讨论】：

原来这么简单，没想到，非常感谢！我设法做我想做的事:)
@Pierre-AdrienDelisle 不用担心！很高兴你把它整理好了。

【解决方案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>

【讨论】：

【解决方案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

【讨论】：