Trapeze with border

Question

I have created a trapeze using CSS.

HTML :

<div class="trapezeG"></div>

CSS :

.trapezeG {
  position: absolute;
  left: 214px;
  top: 120px;
  width: 1px;
  height: 70px;
  border: 1px solid #069;
  border-color: transparent transparent transparent #000000;
  border-width: 32px;
  transform: rotate(180deg);
}

Here is my Fiddle : https://jsfiddle.net/sfck34y3/

Here is the actual result :

CSS trapeze with border

I would like to change the height of the top and bottom points, making it look closer to a rectangle than it is now. How should I modify the border widths?

Just out of curiosity, any reason to transform the element? https://jsfiddle.net/hashem/sfck34y3/1/ Why not to give the right border a width/color ? — Hashem Qolami, Apr 17 '15 at 11:12
Not exactly your approach but you could also use a perspective transform like in this answer - http://stackoverflow.com/questions/15724678/creating-an-isoceles-trapezoid-shape/25833643#25833643 — Harry, Apr 17 '15 at 11:13

score 3 · Accepted Answer · edited May 23 '17 at 10:10

You can use border-left-width to keep the width of the trapeze and reduce the top/bottom borders with the border-width property. You need to set the border-left-width property after the border-width property otherwise it will be overriden :

.trapezeG {
  position: absolute;
  left: 214px;
  top: 120px;
  width: 1px;
  height: 70px;
  border: 1px solid #069;
  border-color: transparent transparent transparent #000000;
  border-width: 10px;
  border-left-width: 32px;
  transform: rotate(180deg);
}

<div class="trapezeG">
</div>

As commented by @Hashem Qolami the transform property isn't necessary to get this orientation.
You just need to remove the transformation and use the right border instead of the left one to make the trapeze shape :

.trapezeG {
  position: absolute;
  left: 214px;
  top: 120px;
  width: 1px;
  height: 70px;
  border: 1px solid #069;
  border-color: transparent #000000 transparent transparent;
  border-width: 10px;
  border-right-width: 32px;
}

<div class="trapezeG">
</div>

Thanks but i would like to keep the original width size of the trapeze.I would like just decrease the angle — wawanopoulos, Apr 17 '15 at 11:18

score 1 · Answer 2 · answered Apr 17 '15 at 11:19

The left side of your shape is defined by the height of the div. While the right side is defined by the height + the top/bottom borders.

So to only change the left side height, you need to increase the height and also decrease the top/bottom border width so that the overall height does not change.

.trapezeG {
      position: absolute;
      left: 214px;
      top: 120px;
      width: 1px;
      height: 100px;
      border: 1px solid #069;
      border-color: transparent transparent transparent #000000;
      border-width: 17px 32px;
      transform: rotate(180deg);
    }

<div class="trapezeG">
</div>

And here is a demo that transitions between the two sizes to showcase the effect: https://jsfiddle.net/sfck34y3/5/ (hover over the shape)

Trapeze with border

2 Answers2