html, css, jQuery, PHP, mySQL

« | »

CSS 3 Star Mandala Tutorial

This tutorial is based on an article from css tricks showing how to create triangles with CSS3.

 

css3 mandala
mandala

 

The basic principal is that you define a div with width: 0 and height:0, and then define three borders: two transparent borders on either side cut the third border into a sharp point (triangle), the height of which is given by the thickness of the third border.

div.Star {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #eee7f3;
}

By altering the borders chosen and their properties it is possible to create a variety of triangles: up, down, left, right.

However I decided to see if I could create a six-pointed star using this method.

First I realised I needed to be able to create a perfect equilateral triangle. An equilateral triangle has 3 sides of equal length, and 3 equal angles (60 degrees).

Now, the only value specified in the css for the basic triangle is its height.

Bisecting the triangle (height) gives a right angled triangle, where A is half of the length of one of the sides of the isosceles triangle.

bisected triangle

triangle bisected to give two right-angled triangles

OK so what do we know about right angled triangles? Well we all learned Pythagoras’ Theorem in school: the sum of the square of the hypotenuse is equal to the sum of the square of the other two sides.

We need whole-number solutions of the problem to work with at the moment, and tables of whole-number solutions to Pythagoras are available. In fact, you don’t even need a table.

The most famous Pythagorean triangle is the 3-4-5 triangle. And even better, multiply those three numbers by any other number and you get another “Pythagorean Triple”.

Let’s say me multiply 3-4-5 by 10, giving 30-40-50 pixels for the dimensions. The base of our CSS triangle will be 60 pixels. Its height will be 40 pixels. However its hypotenuse (slopey side) will be 50 pixels. So it won’t be an equilateral triangle, but it’s a start.

Let’s try that:

div.Star {

width: 0;

height: 0;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

border-top: 40px solid #eee7f3;

 

}

And the results we get show that we do appear to have a triangle with height of 40 and a base of 60 (2 x 30px).

345 Pythagorean CSS3 Triangle

the triangle is 40 pixels high and has a base of 60 pixels.

But why did a width of 30 pixels produce a base of 60px for the triangle? Well that’s where we need to remember how CSS draws borders. No top border was specified, so the side borders expand to their maximum width at the top, as they don’t have anything to compete with. Each one is the same, so they both stretch half the way across.

 

 

 

 

 

 

Just in case that’s still not clear lets see what happens when we add a fourth border.

css3 square

fourth border shown in red

filled css3 square

side borders in black

 

 

 

 

 

 

 

div.Star {

width: 0;

height: 0;

border-left: 30px solid black;

border-right: 30px solid black;

border-top: 40px solid #eee7f3;

border-bottom: 20px solid red;

}

The new border must be 20px high so it squeezes the other highest points downwards until it has “room”. If this fourth border was also transparent it could give yet more control over the exact dimensions of the triangle.*

*edit: I didn’t measure this to check. I should have. I now realise I made a mistake here. The three other triangles must keep their relationship – the point at which the thickness of the side borders was exactly half way across the width of the base is the only point where a line of that length will meet the imaginary vertical line bisecting the triangle at the correct height. The height was specified using the width of one of the triangles in the css and can’t change! Sorry about that folks I got confused. I first worked on this a few days ago and it took me a while to get around to writing the article.

Notice how changing one transparent side to 10px skews the triangle:

div.Star {

width: 0;

height: 0;

border-left: 10px solid transparent;

border-right: 30px solid transparent;

border-top: 40px solid #eee7f3;

}

Skewed CSS3 Triangle

the triangle is now skewed

I’m betting the base of that triangle is 40px, (10 + 30). So that’s how we knew the thickness of the side borders to produce a triangle with base 60px is 30px!

But our triangle is still not equilateral, even though we have managed to produce a 345 triangle. Without wanting to delve into advanced maths, how can we make sure that each side is the same length?

Well it turns out we can make a pretty good guess. Making the side borders 40px makes the triangle a little too squat, and the 30px side borders make it a little two narrow. 35px gives an almost-right appearance. And using an online calculator shows that the dimensions are almost correct. It’s almost as good as a whole number solution! All we need to know is the length of one side (the width of the base, [edit: I am referring to the width of the border in the css, ie the height of the triangle] remember?) and the size of the opposite internal angle (60 degrees for an equilateral triangle). Bingo! But remember the approximation method and adjust your triangle by eye until it looks right if you prefer. Everything you need to know is available on this nifty online triangle calculator. We know the height and the angle ‘Q’, which is 60. Or do some trigonometry and work it out yourself.

Remember the relationship between the dimensions will remain constant as you scale a triangle up or down. For an equilateral triangle, halving the difference between the width of the solid border (triangle height: here 40px) and the corresponding length of the base of the corresponding 3-4-5 triangle (or other Pythagorean Triple: here 30px) will always approximate the width needed for the transparent borders.

So now we need a second identical triangle pointing the opposite direction to make our star. Simply swap border-bottom for border-top in your css, for a second triangle with a class name like “triangle2″. I used star2. You will find your triangles line up neatly beneath each other. Use a negative top margin on the second triangle to pull it up to overlap the first. If your triangles are truly equilateral, you will need to move it up by the height, plus one third of the length height* of the base.

[*sorry, once again I got confused while I was writing this!]

Now you have your CSS3 star. You can put it in a containing div and move it around as a unit and give it different treatments to get some starry effects. How about a radial gradient background, centred on the star? The star itself can’t take a radial gradient. but the effect can look like shining light. You can layer stars of different dimensions to try to create borders: a translucent grey background star a few pixels larger than the white star could give a drop-shadow effect. Several layers of paler colours could give the look of a gradient of light fading away into the night sky. Stacking up stars which have larger size differences, with translucency and background effects such as the radial gradient can give cosmic mandalas galore.

Star Mandala

interference patterns from layers of translucent stars give mandala effects

Striped Star

layers of stars in pale colours and a radial background give a glow

If your other stars have different sizes then remember you will need to move them sideways as well as up - you can work out by how much following the same principals explained for the height ….

Next, I want to make my starry sky glimmer with jQuery animations …

Have Fun!

 

 

 

CSS3 Snowflake Mandala

Snowflake Mandala

Tags: , , , , , , , , , , , , , , , , , , , , ,

This entry was posted on Wednesday, March 9th, 2011 at 8:02 pm and is filed under CSS3, Tutorials, web design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

11 Responses to “CSS 3 Star Mandala Tutorial”

|
  1. [...] so in the last tutorial I showed you how to make an equilateral triangle with css3. Now you can use this basic triangle to make a flower, or another symmetrical shape, using the css3 [...]

  2. [...] Follow this link: CSS 3 Star Mandala Tutorial « Cybertramp Web Design [...]

  3. [...] calculate: CSS 3 Star Mandala Tutorial « Cybertramp Web Design [...]

  4. 偵探 says:

    I signed up in your publication, so please keep up the informative posts, Perhaps there is a way to disable that online system?2

  5. some intrigue info on these cool websites…

  6. John M. says:

    great post! I love it :)

  7. Micheal says:

    BION I’m imperssed! Cool post!

  8. Nollie says:

    Cool! That’s a clever way of lokoing at it!

  9. Channery says:

    That’s 2 clever by half and 2×2 clever 4 me. Tkhnas!

  10. Lettie says:

    You’ve hit the ball out the park! Inrcdebile!

  11. Valuable information and excellent design you got here! I would like to thank you for sharing your thoughts and time into the stuff you post!! Thumbs up!…

|

Leave a Reply