How do I turn the trapezoid opposite?

Question

I've a trapezoid shapes in CSS, but the problem is that I also need the same kind of trapezoid turning the borders opposite, the first trapezoid css is something like this:

  #trapezoid1 {
    height: 0;
 width: 350px;
 border-bottom: 190px solid rgb(2, 145, 178);
 border-left: 45px solid transparent;
 border-right: 45px solid transparent;
 padding: 0 8px 0 0;
 display:block;
 position:relative;
}

But I also need the second trapezoid turning the border-bottom to border-top, however in that case, the text is being flew away from the actual trapezoid.

I did border-top instead of border-bottom to turn the trapezoid opposite.

Here's the full display of the problem.. jsfiddle

Answer 1

Your best option is to use pseudo elements so you dont have to use absolute positioning on the text element.

Using both :before and :after will help create the desired shape. The borders are also transparent so you don't have to worry about background images being coloured over.

#trapezoid {
  width: 260px;
  height: 190px;
  background: red;
  margin-left: 45px;
  position: relative;
}
#trapezoid:before {
  content: '';
  border-right: 45px solid red;
  border-bottom: 190px solid transparent;
  position: absolute;
  left: -45px;
  top: 0;
}
#trapezoid:after {
  content: '';
  border-left: 45px solid red;
  border-bottom: 190px solid transparent;
  position: absolute;
  right: -45px;
  top: 0;
}

<div id="trapezoid">
  Text in here
</div>

You can also refer to one of my previews answers which give a good overview at all of the different possible ways of creating a CSS trapezoid.

• Responsive CSS Trapezoid Shape

Answer 2

How about this:

HTML (add span tags around trap2 text)

<div id="trapezoid1">
  Designing Something
</div>
<br/>
<div id="trapezoid2">
  <span id="trap2-text">Designing Opposite</span><!-- NEW -->
  <!-- I need the text in proper place which currently isn't -->
</div>

CSS (add one rule)

#trap2-text {
  position: absolute;
  top: -190px;
  left: -25px;
}

DEMO

Answer 3

I generally like pure css shapes, but I thought SVG might make your life easier in this case so I started fiddling around with your fiddle. I'm not completely satisfied with the results but it gives some advantage like dynamic size.

Fiddle with comments: http://jsfiddle.net/bo5k36pa/8/

If you want to use this solution I highly recommend to encode your inline svgs in base64 to avoid compability and encoding problems. See this answer for details.

Explanation

The idea was to use an inline svg as background image, so it will stretch to containers of any size.

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 2" preserveAspectRatio="none"><path style="fill: rgb(2, 145, 178);" d="M 0.5 0 L 3.5 0 L 4 2 L 0 2 Z" /></svg>');
background-size: 100%;

The path that makes up the trapez could be modified, if different angles or shapes are required, it could even be generated dynamically using javascript. But the real bummer here is, we can't style inline svg background images. Meaning for example to change just the fill color we have to define the entire svg markup again.

Possible solutions to avoid multiple inline svgs

1. Use <use>. You can define <symbols> in an external svg file and reference them in an inline <svg> via their id attributes. And we can still style those symbols using CSS. However, it would require a fair amount of extra markup in every container. Something like this: <svg viewBox="0 0 4 2" role="img" title="Trapez"><use xlink:href="path/to/images/shapes.svg#trapez"></use></svg>

2. Use CSS filters to change appearance. Example fiddle / Browser Support

3. Go back to CSS Shapes. I'd recommend to take advantage of :before and :after pseudo elements to keep such fancy appendages a bit separate from your content box.