CSS property crop color background

Question

I would like to achieve in CSS a crop for the background color on only one side like this:

into this :

I found the property background-clip but It seems pointless in my case, do you have any ideas on how could I achieve this ? It's maybe a property of CSS that I don't know. Thanks for your help

Answer 1

Moving the "background" itself can simply be done by using margin-left (example below), however I won't be able to help you with the line going from the Introduction-text, to the left and outside the background myself. Obviously the colors in the example are wrong but you should get the idea.

 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

Use multiple background with linear-gradient and adjust background size:

 .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

A solution with box-shadow inset , It works if your blue line is not part of your background, because box-shadow inset hides a part of it

 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> 

Explanation : box-shadow: inset 25px 0 0 0 black;

• inset : inside the box
• 25px : position on X, so we move the shadow 25px to the right, which gives a 25px border on the left side
• 0 0 0 : position on Y, spead and blur
• black : the color, use white in your example