Geek Answers Handbook

How do I contrast the trapezoid?

I have trapezoidal shapes in CSS, but the problem is that I also need the same trapezoid that rotates the borders opposite, the first css trapezoid looks 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 a second trapezoid that rotates border-bottom to border-top , however in this case the text flies off from the actual trapezoid.

I made border-top instead of border-bottom to turn the trapezoid in the opposite direction.

The whole screen of the problem is displayed here. jsfiddle

+6
source share
3 answers

Your best option is to use pseudo-elements, so you do not need to use absolute positioning in the text element.

Using :before and :after will help to create the desired form. Borders are also transparent, so you don’t have to worry about background images being colored.

 #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 preliminary answers, which give a good overview for all possible ways to create CSS trapezoid.

+3
source

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

+2
source

I usually like clean css forms, but I thought that SVG could make your life easier in this case, so I started to practice my violin. I am not completely satisfied with the results, but it offers some advantages, such as dynamic size.

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

If you want to use this solution , I highly recommend encoding embedded svgs in base64 to avoid compatibility and encoding problems. See this answer for more details.

Description

The idea was to use the built-in svg as a 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 trapezoid can be changed if different angles or shapes are required, it can even be generated dynamically using javascript. But the real flaw here is that we cannot create svg embedded background images. For example, to change only the fill color, we must again define all svg markup.

Possible solutions to avoid multiple built-in svgs

  • Use <use> . You can define <symbols> in an external svg file and refer to them in inline <svg> through their id attributes. And we can still erase these characters using CSS. However, a significant additional allowance will be required for each 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 the look. Script Example / Browser Support

  • Return to the CSS shapes. I would recommend using: before and: after pseudo-elements so that such bizarre appendages are slightly different from your content.
+1
source

More articles:


All Articles