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

Sorry, I mightn't have been clear, can you go to the fiddle, you will get the question, When I turn the border-bottom to border top to transform the trapezoid, the text inside the div flew away outside. — user2906838, Dec 06 '15 at 03:12

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

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

This seems great solution. Thanks! – user2906838 Dec 07 '15 at 09:01 — user2906838, Dec 07 '15 at 09:01

score 2 · Answer 2 · answered Dec 06 '15 at 03:24

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

answered Dec 06 '15 at 03:24

Michael Benjamin

346,931
104
581
701

Michael_B, Thank you, this works, I did have tried this, but I was looking for something if we could do this without adding this absolute position. I'm not sure if this affect on responsiveness. But thank you again, I will try with this. – user2906838 Dec 06 '15 at 03:41
2

Well, the issue here is that you're placing text on a border. There's no background space to work with. In both your trapezoids, the text is actually in the same place -- right beneath the top border ([**see here**](http://jsfiddle.net/bo5k36pa/7/)). Only the border set-up changes. Not sure if there's a better way to overlay text on a border than absolute positioning. – Michael Benjamin Dec 06 '15 at 04:01
Yes, This seems perfect, I also researched, but couldn't find any other way, It's working. – user2906838 Dec 06 '15 at 04:31

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

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

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>
Use CSS filters to change appearance. Example fiddle / Browser Support
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.

This seems simply great, but I do have to understand the svg in the first place. For now, I only know the CSS, but the way you have done this is so much neat and effective. Liked it. Thank you so much — user2906838, Dec 06 '15 at 06:51

How do I turn the trapezoid opposite?

3 Answers3

Explanation

Possible solutions to avoid multiple inline svgs