How to incline the bottom border of a div with background image

Question

I have a simple div set to be a height of about a full viewport. This div has a background image and a line of text. I would like to incline the bottom border of this div while keeping all the content aligned as per default (horizontally). I have tried with transform rotate or skew but this rotates the content as well makes background move out of the corners of the div due to the rotation. Is there a way to do this?

EDIT: This is an example of what I tried with rotated content:

<div class="backgrounddiv"><h1 class="title">Title</h1></div>

<style>
.title{
    position:absolute;
    bottom: 20px;
    left:40%;
          transform: translate(-50%, 0);
}
.backgrounddiv{
background:url('media/bgpic.png') scroll no-repeat center/cover;
transform: rotate(10deg);
}

Answer 1

One solution would be to use a pseudo-element as a mask. You can set the placement and background colour of the element so that it looks like we're cutting a chunk out of the <div> holding your content.

Here's an example snippet. Run it to see the result.

Change the background-color of the mask to red (or any colour) and remove overflow: hidden from the container to get a better idea of what is actually happening.

.container {
  width: 200px;
  height: 200px;
  background: url("https://homepages.cae.wisc.edu/~ece533/images/airplane.png");
  background-size: cover;
  font-size: 2rem;
  position: relative;
  overflow: hidden;
}

.container::before{
  content: '';
  width: 200%;
  height: 50%;
  position: absolute;
  bottom: -10%;
  left: -50%;
  transform: rotate(-10deg);
  background-color: white;
}

<div class="container">
  <p>Some text</p>
</div>