Who would have thought that geometry would come into play when working with CSS? I need help figuring out how to perfectly cover a rotated container with an upright background image. The goal is to hide the rotation on the sides and maintain dynamic control over sizing using percentages.
The blue line in the image represents the "wall" that the container needs to be stuck to. Since the image is upright, it needs to be larger than the container. I found a useful formula for this calculation here.
I'm struggling with calculating the various positionings within the design. Here's what it looks like without specific pixel values:
If anyone can help me understand how to calculate these distances, I'd greatly appreciate it.
For reference, here's my CodePen with the code written in SCSS: CodePen Link
body {
padding: 2em 5em;
}
.wrapper {
border-left: 3px solid blue;
}
.wrapper .container {
opacity: 0.7;
width: 300px;
background-color: red;
border-radius: 0 40px 40px 0;
overflow: hidden;
transform: rotate(10deg);
margin-left: -42px;
}
.wrapper .container .sizing-wrapper {
width: 100%;
padding-top: 150%;
position: relative;
}
.wrapper .container .img {
position: absolute;
top: 0;
left: 0;
background: url("http://placekitten.com/300/450") no-repeat right top;
background-size: cover;
height: 110.0573842629%;
width: 124.5280657351%;
transform: rotate(-10deg) ranslateY(-31px) translateX(-32px);
}<div class="wrapper">
<div class="container">
<div class="sizing-wrapper">
<div class="img"></div>
</div>
</div>
</div>