Create triangles

Question

I am creating a wordpress theme and both sides of the content should have a diagonal border. I can solve this with images, but this is an ugly way, and the content does not have the same length on every page.

In this case, I think that two triangles on the right and left are the correct solution. I tried this with this tutorial , but the problem is that I have to use a fixed width for the borders, and the triangle must have the height of the content, dynamically adjusted.

How can I solve this, that I come up with two triangles (indicated by red in the sketch).

Answer 1

You can achieve this (albeit somewhat inaccurately) with CSS conversion:

Demo: http://jsfiddle.net/cUWm2/2/

<div class="shape"> A variable amount of content. </div> 

 .shape { position: relative; } .shape:before { content:""; -moz-transform: skewX(10deg); -webkit-transform: skewX(10deg); transform: skewX(10deg); width: 140%; left: -20%; height: 100%; background-color: #555; position: absolute; top: 0; z-index: -1; } 

This provides the required form with minimal markup and decent (IE9 + and all other modern) browser support. However, when scaling the height up or down, eventually the triangles cease to be triangles, and the fourth edge becomes visible. You have several options:

• Find sizes that work for a practical amount of content and code.
• Dynamically change the amount of skew using JavaScript.
• Mix the background of the shapes with the main shape.
• Ignore it (depending on the layout, this does not necessarily look bad).

All that said (after playing with various CSS options), I will probably first consider an image-oriented solution. You can use the :before and :after pseudo-elements to create containers that resize vertically along with the main content, while maintaining the same width. You can then use the background image to cover the desired area or place a 100% x 100% image in the container.

Answer 2

I also agree to using SVG. I find them easier to manipulate as they are scalable and cross-compatible between browsers as they are images. Here is the answer I posted on a similar question that should get you started: Make CSS3 triangle with linear gradient

From there it will be easy to set the height of the image according to the content. Here is a jQuery example:

 $(document).ready(function() { $(".triangle").height($(".content").height()); }); 

Answer 3

I would solve this using SVG (scalable vector graphics). You create two SVG triangles and then create a three-column layout where all the columns are equally tall (for example, using display: table-cell). You selected the left triangle as the background image for the left column, and the right triangle as the bg image for the right. Medium for your content.

Remember to use preserveAspectRatio ( https://developer.mozilla.org/de/docs/SVG/Attribute/preserveAspectRatio ) in your SVG.