how do you create a trapezoid-like div with CSS

Viewed 1277

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: enter image description here

.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>

3 Answers
Related