Ngademin Pegiat Teknologi

Creating Triangle Shapes With CSS

2 min read

Creating Triangle Shapes With CSS

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

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

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

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

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

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.

And when executed, the result will be as follows.

css triangle

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.

DEMO

DOWNLOAD

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

Ngademin Pegiat Teknologi

Google menyediakan Earth Engine untuk semua bisnis dan pemerintah

Selama dekade terakhir, para peneliti di akademisi dan organisasi nirlaba telah memperoleh akses ke informasi yang semakin kompleks tentang permukaan bumi melalui Google Earth...
Ngademin
1 min read

Google menyediakan Earth Engine untuk semua bisnis dan pemerintah

Selama dekade terakhir, para peneliti di akademisi dan organisasi nirlaba telah memperoleh akses ke informasi yang semakin kompleks tentang permukaan bumi melalui Google Earth...
Ngademin
1 min read