Hello I am trying to create a trapezoid-like shape div that will allow me to input a logo. Most places I have researched gave me borders to create the shape but it wont allow me to put a logo in it without creating big borders. The trapezoid-like shape will also be located inside the header div.
Here is what I am trying to accomplish:

.logo-container {
margin-left: 15px;
margin-bottom: -15px;
border-bottom-left-radius: 0.625em;
border-bottom-right-radius: 0.625em;
}
<header>
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 logo-container">
<div class="center-align">
<img class="img-responsive" src="https://placehold.it/350x250" />
</div>
</div>
</div>
</div>
</header>