how to create backslash effect on div with css-CodePudding

I'm looking for a way to create this effect with CSS:

target effect

I got the red line and it is a simple div.

Does anyone know a way for getting this effect?

CodePudding user response：

Based on the example on https://css-tricks.com/stripes-css/, I have used -45deg to create a "backslash" and blue instead but it should explain the concept. Use this as a basis to create a more complex background for your div:

div {
  background: repeating-linear-gradient(
    -45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );  
}

<div>
  hello
</div>

Learn more about the repeating-linear-gradient.