Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 24, 2022 09:28 pm GMT

How make a Triangle in CSS3

Hi! There are several ways to make a triangle in CSS3, in this post I will show one of them, using the border property

First!

1- Prepare the environment

You can use any text editor, however I recommend vscode :).

Now just create a folder and inside it two the index.html and the style.css

If you are using linux just type:

mkdir triangleExamplecd triangleExampletouch index.html style.css

Then open the folder in vscode typing:

code .

Next!

2- Create a simple static web page

Write the html content with a section tag and a div with the class triangle inside it:

<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge" />        <meta name="viewport" content="width=device-width, initial-scale=1.0" />        <title>Triangle Example</title>        <link rel="stylesheet" href="./style.css" />    </head>    <body>        <section class="section">            <div class="triangle"></div>        </section>    </body></html>

Write the basic style for the section tag:

* {    margin: 0;    padding: 0;    box-sizing: border-box;}.section {    height: 100vh;    display: flex;    align-items: center;    justify-content: center;}

Open the index.html file in your browser (I recommend Google Chrome :))

Finally!

3- Create a triangle

Once you get here is just type the triangle styles:

.triangle {    width: 0;    height: 0;    display: inline-block;    border: 50px solid transparent;    border-top-color: crimson;}

You sould see something like this in your browser:

Triangle example

How it works...?

The trick is that the triangle does not has width or height, and we set the border property to 50px (the size tha we want :))

Also the border-style is solid so is fully painted and the border-color is transparent so in that way, you will not see anything

But if we set border-top-color to crimson for example, then we will see just the to top of our element (because the others sides are transparent), which is in fact a triangle!

You can play around with those values and paint any of the sides, and even paint a rectangle triangle

To achieve this just paint the top and the left border in the triangle styles:

    border-top-color: crimson;    border-left-color: crimson;

You should see something like this:

Rectangle Triangle example

Usage Examples

There are many uses for a triangle in a web page

You can create a message box with an arrow like this:

Message Box Example

To achieve this let's wrap our triangle in div tag with the class "message-box" and put a message inside it:

<div class="message-box">    Message Box!    <div class="triangle"></div></div>

Then modify the message-box element style:

.message-box {    background-color: crimson;    width: 200px;    height: 60px;    text-align: center;    line-height: 60px;    color: white;    text-transform: uppercase;    font-weight: bold;    position: relative;    border-radius: 6px;}

And finally create and position the triangle correctly:

.message-box .triangle {    display: inline-block;    width: 0;    height: 0;    border: 8px solid transparent;    border-top-color: crimson;    position: absolute;    top: 100%;    left: 50%;    transform: translateX(-50%);}

We set position: absolute to the triangle, for correct positioning, because it must be right down the message box, and centered

For centered we set the left: 50% property to paint the element right after the middle (because the paint starts exactly in the middle) so is necessary move it the half of it's size and for that we use transform: translateX(-50%).

Concluying

Now you should know how to easy create triangles in CSS3

You can play around with those values and create the perfect triangle for your page!


Original Link: https://dev.to/jmlpez/how-make-a-triangle-in-css3-1b8a

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To