Is it possible to style a div to be trapezoidal?

Question

I know it's possible to skew but I don't see a way to skew each corner with a particular degree.

Here's the project I'm working on: http://map.ucf.edu/

Looking specifically at the tabs within the menu. Right now I'm using images, I would like to change that for capable browsers.

I know it's possible to create a CSS trapazoid, but that is using borders without content. The end result also needs a bit of rounded corners.

edit: Starting with Zoltan Toth's solution I was able to achieve this: demo

div {
    height: 20px;
    padding:2px 5px 0 5px;
    color:white;
    background: rgba(0,0,0,.5);
    margin: 0 10px;
    position: relative;
    border-top-left-radius: 6px 4px;
    border-top-right-radius: 6px 4px;
    font-family:sans-serif;
    font-size:13px;
    line-height:20px;
    vertical-align:bottom;
    display:inline-block;
    white-space:nowrap;
}

div:before {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-bottom: 19px solid rgba(0,0,0,.5);
    border-left: 9px solid transparent;
    position: absolute;
    bottom: 0;
    left: -9px;
}

div:after {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-bottom: 19px solid rgba(0,0,0,.5);
    border-right: 9px solid transparent;
    position: absolute;
    bottom: 0;
    right: -9px;
}

.b { background:black; margin:0 -7px 0 20px; }
.b:after, .b:before { border-bottom-color:black; }

Solution 1

It is possible, here is the rough idea:

div {
    width: 200px;
    height: 100px;
    background: #ddd;
    margin: 20px 150px;
    position: relative
}

div:before {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid #ddd;
    border-left: 50px solid transparent;
    border-right: 50px solid #ddd;
    position: absolute;
    top: 0;
    left: -99px;
}

div:after {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid #ddd;
    border-left: 50px solid #ddd;
    border-right: 50px solid transparent;
    position: absolute;
    top: 0;
    right: -99px;
}

<div>Hello</div>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus ex quis enim posuere auctor.</div>

Solution 2

We can use linear-gradient() to draw trapezoidal shape on rectangular element.

This trick uses the idea of dividing whole shape in different parts and then draws each shape on the background independently.

div {
  background-image:
   linear-gradient(to bottom right, transparent 50%, silver 50%), /* draws left part */
   linear-gradient(to bottom left, transparent 50%, silver 50%), /* draws right part */
   linear-gradient(to right, silver, silver); /* draws central flat part */

  background-repeat: no-repeat;

  /* Sets the background size of each of three shapes individually */
  background-size: 75px 100%, 75px 100%, calc(100% - 150px) 100%;

  /* Sets the background position of each of three shapes individually */
  background-position: 0 0, 100% 0, 75px 0;
}

body {
  background: linear-gradient(orange, red) no-repeat;
  min-height: 100vh;
  margin: 0;
}

div {
  background-image: linear-gradient(to bottom right, transparent 50%, silver 50%),
    linear-gradient(to bottom left, transparent 50%, silver 50%),
    linear-gradient(to right, silver, silver);

  background-size: 75px 100%, 75px 100%, calc(100% - 150px) 100%;
  background-position: 0 0, 100% 0, 75px 0;
  background-repeat: no-repeat;

  padding: 20px 80px;
  min-height: 80px;
  width: 300px;
  margin: 25px;
}

<div>
  Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
</div>

<div>
  Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
</div>

Comments

[Doug]

This is really slick. The only issue remaining is transparency. I was able to get really really close, but there are some awkward joints. When shrunk down you don't notice it but the border rendering is pretty harsh. I don't think it looks as good as the images but I might use it anyway. Thanks!

[Zoltan Toth]

@JamesP. You draw really thick borders to a 0 width and 0 height element, so you get a square or rectangle (based on border widths) made up of 4 triangles. Then you can color the triangles (or make them transparent) to appear as a part of the trapezoid - jsbin.com/verubejigo/edit?html,css,output

[James P.]

Very clear explanation. Thanks :) . So it's like a very small square with very thick borders and the browser draws a diagonal by convention going from the corners of the outer square formed by the border towards the inner square it surrounds.