Looking to replicate the design shown in the image below using only CSS, where a striping pattern extends downwards at an angle from a block of content with a similar color. The challenge is to maintain the base background color outside of this striped area.
I was able to create the striped background effect by combining linear gradients with percentage stops, utilizing the background-size property, and incorporating rgba colors. However, the issue lies in the fact that the pattern fills the entire section when I want it to be limited to a parallelogram shape extending from the right-hand div without disrupting the content flow.
Avoiding the use of an image as the background solution is essential for maintaining a mobile-first responsive design approach. Therefore, finding a pure CSS solution with smooth scaling is necessary.
Experimenting with the transform:skewX property showed promise, particularly when paired with a wrapper to unskew the contents of the block. While I have achieved the angled boundaries I desired, aligning them with the right-hand div above without affecting the intended flow remains a challenge.
https://i.sstatic.net/yTZ18.png
Here is a JSFiddle link demonstrating the initial attempt at implementation. However, the current solution lacks responsiveness. The existing striped background utilizes a :before pseudo-element with the following styling:
#striped::before {
content: '';
position: absolute;
top: -150px;
right: 130px;
width: 200%;
height: 200px;
background: linear-gradient( rgba(93, 165, 182, 0.3) 25%, transparent 25%, transparent 50%, rgba(93, 165, 182, 0.3) 50%, rgba(93, 165, 182, 0.3) 75%, transparent 75%, transparent);
);
background-size: 100% 4px;
transform: rotate(-45deg);
transform-origin: top right;
margin:0;
}