Rotate and crop a svg background with CSS - css

Question

I have a weird shape svg that I cannot edit, is there a way to rotate and crop a piece of it and use it as a background image with CSS? It doesn't necessarily have to be a background image as long as its location stays intact on mobile.
This is my code:
<section id="alert">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h4 class="text-center">Get scholarship alerts by providing your info:</h4>
<form class="" action="index.html" method="post">
</form>
</div>
</div>
</div>
and this is my CSS:
#alert .container {
padding-top: 4em;
padding-bottom: 4em;
}
#alert {
background-color: #004976;
color: #fff;
min-height: 400px;
position: relative;
}
#alert::after {
position: absolute;
content: '';
background-image: url(https://svgshare.com/i/SN2.svg);
width: 60px;
height: 100%;
right: 0;
top: 0;
}
With this Pseudo element it looks okay but it doesn't look like the mockup.
This is how it looks with my code:
And this is the mockup and how it should look:
This is the actual SVG file: https://svgshare.com/i/SN2.svg

Answer 1

Hello this is what I got, I think this is what you want to achieve?
No change was made in the HTML, the CSS changed like this:
#alert .container {
padding-top: 4em;
padding-bottom: 4em;
}
#alert {
background-color: #004976;
color: #fff;
min-height: 400px;
position: relative;
overflow: hidden;
}
#alert::after {
position: absolute;
content: '';
background-image: url(https://svgshare.com/i/SN2.svg);
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
width: 100vh;
height: 60px;
right: 0;
bottom: 0;
transform-origin: bottom right;
transform: scaleY(-1) rotate(-90deg);
}
Basically I rotated and flipped the after pseudo-element and played around with the background (I would imagine a shorthand can be used there)
I also added overflow: hidden; to make sure the SVG doesn't go outside the container
You can check out my solution here: https://jsfiddle.net/h7k2eosx/5/
Note that this can present issues depending on the screen size but this should be enough to get you going I hope :)
If your design allows it you could position the after pseudo-element with a fixed position, that would work nicely :)
( like here: https://jsfiddle.net/Ltamj8r6/ )