Creating Triangle Shapes With CSS – Welcome back to the css tutorial at malasngoding.com. some time ago there were some friends who read tutorials at malasngoding.com who asked to make a tutorial on how to make a triangle shape using CSS.
So to complete the CSS material on malasngoding.com, in this tutorial we will discuss how to create a triangle using CSS.
Please see the following explanation.
Creating Triangle Shapes With CSS
Before going further into the discussion about making triangles using CSS, it’s a good idea for friends to also read about the following tutorial.
Also Read:
Okay, let’s just get into the discussion.
Creating Triangle Shapes With CSS
To make a shape trianglewe can use the css property “border“. how we can make a line or border in certain parts to form a pattern of triangles.
I divided the process of creating this CSS triangle into 2 stages.
Stage 1- Creating the Triangle Pattern
Consider the following example.
HTML
|
|
<h2>Make Triangle With CSS – www.malasngoding.com</h2> <div class=“triangle1”></div> |
In the HTML script above, I gave an example by creating a
element which we gave the class triangle1.
Next we give a touch of CSS.
CSS
|
|
.triangle1{ height:0px; width:0px; border–bottom:solid 120px blue; border–left:solid 80px red; border–right:solid 80px yellow; } |
In the CSS script above, we first set the width and height to 0px. so that there is no empty space in the triangle.
Next give border-bottom with type solidline size 120px with color blue.
Garis kiri (border-left) with type solidsize 80px with color red. right line (border-right) with type solidsize 80px with color yellow.
Then the result will be as follows.
make a triangle with css
Stage 2 – Emphasizing the Triangle
The next step, change the color of border-left dan border-right Becomes transparent to make it transparent.
CSS
|
|
.triangle1{ height:0px; width:0px; border–bottom:solid 120px blue; border–left:solid 80px transparent; border–right:solid 80px transparent; } |
As seen in the CSS script above, now we change the color of the right and left lines to transparent.
So the result is as follows.
css triangle shape
As seen in the image above. we have succeeded in making the shape triangle.
Creating Up, Right, Bottom and Left Triangles With CSS
For the next experiment, to make a triangle shape that leads to the right, down or to the left, we just have to play with the line or border.
As in the following example.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
|
<!DOCTYPE html> <html> <head> <title>Make Triangle With CSS – www.malasngoding.com</title> </head> <body>
<h2>Make Triangle With CSS – www.malasngoding.com</h2> <!— triangle ke above —> Triangle <div class=“triangle1”></div> <!— triangle ke kanan —> Triangle ke kanan <div class=“triangle2”></div> <!— triangle ke down —> Triangle ke down <div class=“triangle3”></div> <!— triangle ke left —> Triangle ke left <div class=“triangle4”></div> </body> </html> |
And when executed, the result will be as follows.
css triangle
At this point, we have finished discussing how to make triangles with various shapes using HTML and CSS.
Next, friends, please experiment by changing the color or size, to be more familiar with the technique of making triangle shapes with CSS using borders.
Thank you ..
Incoming search terms:
- lazy coding menu css template
- triangle css
- learn css malascoding part11
- learn to make css shapes
- how to make a triangular stretcher through tek
- html make triangle With css
- make shapes with css
- make a triangle using css
- Make a css triangle
- source code html dan css sidebar males ngoding