CODEWITHSUNDEEP
htmlcsscss-shapes
Francis
Francis

Reputation: 1372

how do you create a trapezoid-like div with CSS

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>

Upvotes: 4

Views: 1425

Answers (3)

Spencer Rohan
Spencer Rohan

Reputation: 1939

This walkthrough may help you: http://css-shapes.xyz/shape-with-a-slanted-side

It uses the CSS transform property Skew - great for creating angled divs. The third example that link shows will get you started.

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105913

You may use multiple border-radius values to cut them off.

you may use different border-radius within imbricated tags (parent then childs) to tune your final shape. example

img {
  overflow: hidden;/* not necessary for img */
  border-radius: 0 0 5% 5% / 0 0 100% 100%;
}
<img class="img-responsive" src="https://placehold.it/350x250" />

you may also inbricate rounded borders :

div div {
  display: inline-block;
  vertical-align: top;
  margin: 0 3em;
  overflow: hidden;
  /* not necessary for img */
  border-radius: 0 0 10% 10% / 0 0 100% 100%;
}
img {
  border-radius: 0 0 3em 3em / 6em;
  display: block;
}
body>div {
  margin: 1em;
  background: linear-gradient(to top, gray 2em, #BDDDF4 1em);
}
<div>
  <div>
    <img class="img-responsive" src="http://dummyimage.com/350x220/0072BB/ffffff&text=LOGO+img" />
  </div>
</div>

Upvotes: 3

Devsman
Devsman

Reputation: 498

I don't think you can technically make a div that isn't rectangular, but this site has a list of common shapes you might want to draw, and samples of how to draw them. Trapezoid is one of them. It looks like what you're actually playing with here is a number of features like the shape of the border, though, rather than the shape of the div itself, which (without testing) I would expect would mean that anything you put on top of it will pay no attention to the shape you're drawing and simply fill the div as it technically exists.

Upvotes: 0

Related Questions