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/

L

Answer 1

It is possible, here is the rough idea:

div {
    width: 200px;
    height: 100px;
    background: #ffffd;
    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 #ffffd;
    border-left: 50px solid transparent;
    border-right: 50px solid #ffffd;
    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 #ffffd;
    border-left: 50px solid #ffffd;
    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>

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