As shown in the figure, there is a dark slash on the background of the div that you want to achieve.
The main use here is the linear gradient property in css.
Let’s take a look at the online examples and their effects:
Example 1
<body>
<div class="patterns pt1"></div>
<div class="patterns pt2"></div>
<div class="patterns pt3"></div>
</body>
<style>
.patterns {
width: 200px;
height: 200px;
float: left;
margin: 10px;
box-shadow: 0 1px 8px #666;
}
.pt1 {
background-size: 50px 50px;
background-color: #0ae;
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
.pt2 {
background-size: 50px 50px;
background-color: #0ae;
background-image: -webkit-linear-gradient(to right, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(to right, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
.pt3 {
background-size: 50px 50px;
background-color: #0ae;
background-image: -webkit-linear-gradient(-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}
</style>
Effect:
Example two:
background: linear-gradient(45deg,red 0%,red 33.33%,yellow 33.33%,yellow 66.66%,green 66.66%,green 100%);
Effect:
As you can see, the gradient property can set the angle, stripe color, and stripe width.
Therefore, by comparison, I can realize my own needs. The code is as follows:
background: #536fc6;
background-image: -webkit-linear-gradient(-30deg,
transparent 0%,
transparent 60%,
rgb(76, 104, 184) 60%,
rgb(76, 104, 184) 75%,
transparent 75%,
transparent);
Code explanation: The angle of the gradient is -30 degrees, and then 0%~60% is transparent, that is, the color of the background set above is a relatively light blue. Then 60%~75% is an additional color, which is dark blue. 75%~100% is light blue.
Then the realization is the effect of my top screenshot!