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; }

If you're asking if you can actually cause the browser to interpret the shape of a div as anything other than a rectangle, the answer is no. But it is possible to wrap content in a way that gives that appearance. Would it be possible to give a visual example of the effect you're trying to achieve? (perhaps a rough sketch of some sort?) — Michael Mior, Jan 03 '12 at 21:08
You want this but upside down, http://stackoverflow.com/a/8083801/7613 Images are much easier. — Andrew, Jan 03 '12 at 21:14
possible duplicate of [How to draw a trapezium/trapezoid with css3?](http://stackoverflow.com/questions/7920754/how-to-draw-a-trapezium-trapezoid-with-css3) — fiatjaf, Aug 02 '13 at 07:00
Another way to do it. http://stackoverflow.com/questions/19611206/right-trapezoid-outline-shape-with-transparency/22406643#22406643 — Maxi, Mar 14 '14 at 14:23
If you need your trapezoid to be responsive, here is one idea, only works if your trapezoid will have width proportional to your viewport width https://codepen.io/anon/pen/EXQXvv — gota, Jun 30 '17 at 10:25

Zoltan Toth · Accepted Answer · 2016-11-09T11:46:34.713

14

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>

edited Nov 09 '16 at 11:46

answered Jan 03 '12 at 21:24

Zoltan Toth

46,981
12
120
134

This is really slick. The only issue remaining [is transparency](http://jsfiddle.net/WsaQf/). I was able to get [really really close](http://jsfiddle.net/WsaQf/2/), but there are some awkward joints. [When shrunk down](http://jsfiddle.net/WsaQf/5/) 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! – Doug Jan 04 '12 at 15:22
1

@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 - http://jsbin.com/verubejigo/edit?html,css,output – Zoltan Toth Dec 20 '16 at 20:59
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. – James P. Dec 20 '16 at 21:06

score 1 · Answer 2 · answered Dec 23 '16 at 15:00

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>

Is it possible to style a div to be trapezoidal?

2 Answers2

Linked

Related