Home / Articles / Programming languages / Markup languages / HTML & CSS / Triangles with different shapes and orientations using only CSS

Triangles with different shapes and orientations using only CSS

Triangles with different shapes and orientations using only CSS
 
Triangles with different shapes and orientations using only CSS
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


CSS doesn't have special property for making triangles. But smart web developers invented a hack which allows to make triangles with different shapes and orientations using only CSS.

The whole hack is based on different values for border CSS property.

For example you have div element which contains some text:

Example 1

Now, using CSS styles, we add borders for all four sides of the element with widths 45 pixels where each side has different border color:

border-style: solid;
border-width: 45px;
border-color: red green blue yellow;
Example 2

Now, we remove the text in the element to make it empty:

Example 3

Also we set the width of the element to zero by adding the following styles to the existing ones above:

width: 0;
Example 4

And now it's time for the awesome part. In the style above we change the border-width CSS property and by this we set border widths to 45 pixel for all sides of the element except the top one:

border-width: 0 45px 45px 45px;

The top border width is set to zero to remove it from the element:

Example 5

And the last thing is to set border color to transparent for the left and right sides of the element and leave blue color for the bottom side. The final styles look like this:

border-style: solid;
border-width: 0 45px 45px 45px;
border-color: red transparent blue transparent;
width: 0;

Look what we get:

Example 6

It's a triangle!

Now we know how to make a triangle using border CSS property. Here are several examples on how to change its shape and orientation.

border-style: solid;
border-width: 0 100px 45px 100px;
border-color: transparent transparent blue transparent;
width: 0;
Example 7
border-style: solid;
border-width: 0 45px 100px 45px;
border-color: transparent transparent blue transparent;
width: 0;
Example 8
border-style: solid;
border-width: 100px 45px 0 45px;
border-color: red transparent transparent transparent;
width: 0;
Example 9
border-style: solid;
border-width: 0 45px 100px 200px;
border-color: transparent transparent red transparent;
width: 0;
Example 10
border-style: solid;
border-width: 45px 100px 45px 0;
border-color: transparent green transparent transparent;
width: 0;
Example 11

The examples above work fine in all popular browsers including the old ones such as IE7 and IE8.


 

Read also

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation