How can I achieve the 'cut' in the design? - html

Question

I am trying to achieve the following design:
https://imgur.com/a/iXhOTfR
My problem is that I don't want to use a png image as it is too large. Is there another way of achieving the cut image effect?
I am using a SVG file for the left blue part. This is what I achieved so far: https://imgur.com/a/bZSjOUH
Here is my HTML:
<section class="section">
<div class="section-mask">
SVG FILE
</div>
<div class="container-full">
<div class="row">
<div class="col-lg-6 column-text">
<h2 class="title">
Section Title
</h2>
<div class="paragraph">
Section Content
</div>
</div>
<div class="col-lg-6 column">
Section Widget
</div>
</div>
</div>
</section>

Answer 1

If I understand you correctly, you want to achieve something like multiple angled cuts with varying images and background colors. You can do this with something like the following, tailoring it to your needs, and through experimentation swap in different solutions but using the same basic tools.
These tools largely comprise:
clip-path, &
linear-gradient
This solution will provide a close match to the effect, but adapt to the users viewport. But in adapting, be aware that angles will necessarily change (but it should feel natural and fluid, unlike a fixed image that scales and feels unnatural as the viewport changes).
Clip path can be used to give shape to an element, and while the logic for "drawing" the desired shape can be tricky, Bennett Feely has a great tool called Clippy to work out the code.
Here's the 'cut design' demo on CodePen, and I'll include the working code here, as well, with a brief explanation.
The HTML is written assuming that this is part of a visual treatment for a page header, but adapt as needed. The CSS is a quick and dirty mock-up with clip-path arranged in a way to make the number pairs easy to scan and adjust at a glance:
header {
background-image: url(//unsplash.it/1600x900);
background-size: cover;
}
.cut-container {
background-image: linear-gradient(80deg, hsla(180, 100%, 40%, .5) 44.9%, white 45.1%);
}
.cut {
background: url(//unsplash.it/1600x600) center center;
background-size: cover;
clip-path: polygon(
0 0,
100% 0,
100% 70%,
0 100%
);
height: 20em;
}
.cut2 {
background: hsl(220,50%,30%);
clip-path: polygon(
50% 95%,
100% 25%,
100% 100%,
0 100%,
0 25%);
height: 15em;
}
<header>
<div class="cut-container">
<div class="cut"></div>
<div class="cut2"></div>
</div>
</header>
Clip-path is here used to make a polygon, and the number pairs indicate where to position the corners. Each pair corresponds to the number of angles in the shape, so one is a trapezoid, and the other is essentially an odd pentagon in a sort of M shape.
The middle bit is achieved with a hard linear-gradient over a background image. This is all done with random images drawn from the Unsplash API, but you could do something with background position, for example, and use whatever images you're working with in appropriate sizes and eliminate the large bandwidth issues in this rough demo.
Finally, note that for an angled linear-gradient with a sharp cut, most monitors will produce a jagged edge. To effect anti-aliasing and the appearance of a smooth edge, use values that are close but not exact. Here, .cut-containeruses 44.9% and 45.1%, which looks smooth.
With a little more work and appropriately sized images, you can use some of these techniques to build the kind of design you're after with pure CSS and without complex transforms or images that don't adapt to viewport. The support isn't bad on this for modern browser, and those that lack support will ignore the clip-path and fall back to solid blocks, which I really believe is better than fighting through a complex solution for a cosmetic effect, or making high rendering demands of older browsers.

Answer 2

How about making a rotated css block that overlays the image while staying below the svg?
body {
overflow-x: hidden;
}
.image {
background: grey;
width: 100%;
height: 100px;
}
.cut {
border: 1px solid red;
width: 200%;
height: 150px;
transform: rotate(-5deg);
background: white;
padding: 50px;
transform-origin: 0% 50%;
position: absolute;
}
.svg {
border: 1px solid green;
position: relative;
z-index: 1;
}
<div class="image">This would be the image</div>
<div class="cut">This is the CSS block</div>
<div class="svg">This would be the SVG</div>