Slanting or skewing the bottom of the image

HTML-CSS
1

Hello everyone,

I’m trying to slant or skew the bottom of the image but for some reason it’s not working-
it’s skewing/slanting the top, the bottom, the text and even the button. Cheers :slight_smile:

This is the HTML:

<div class="showcase">
		<div class="site_title">
			<h1>My Page Title Comes Here</h1>
			<p>The Beauty of Nature</p>
			<a href="http://mypage.com" class="btn-get-started">My Story</a>
		</div>
		<div class="overlay"></div>		
	</div>

and this is the CSS:

/*********** 
Showcase
***********/

.showcase{
  width: 100%;
  height: 85vh;
  background: url("../images/nature.png") top center;
  background-size: cover;
  position: relative;
  color: white;
}
  
  
.overlay {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  }

.site_title {
  position: absolute;
  top: 47%;
  left: 15%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 2;
  }


.site_title h1 {
  font-family: 'Rufina', serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 3.4rem;
  color: #fff;
  text-align: left;
  }


.site_title p {
  font-family: 'Rufina', serif;
  font-size: 1.4375rem;
  font-weight: 400;
  color: white;
  text-align: left;
  letter-spacing: 5px;
  margin-top: 10px;
  }


.btn-get-started {
  margin-top: 10px;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  display: inline-block;
  padding: 8px 24px;
  border: 2px solid #cd0021;
  font-family: 'Rufina', serif;
  font-weight: 400;
  color: #fff;
  background: #cd0021;
  }
   
   
.site_title a:link {
  color: #fff;
}

.btn-get-started:hover {
  background-color: #c2131f;
  }
2

Update: I found a solution but it won’t work for the code I wrote above. The solution lies in using the clip-path: polygon