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> 

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