How to make a triangle in css

青灯夜游
Release: 2023-01-04 09:34:29
Original
71440 people have browsed it

How to make a triangle in css: first create a div element, set the width and height of the div to 0, fill it with only the border width, and set the border style to solid line "solid"; then set the color of the top border, Just set the color of the remaining three borders to the transparent "transparent" value.

How to make a triangle in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Use CSS to draw triangles

First step

First, let’s create a div. Then add a layer of border to this div, and add different colors to the upper, lower, left and right borders for easy observation. The code and effect are as follows:

.trangle{
  width: 100px;
  height: 100px;
  border: 100px solid #000;
  border-top-color: red;
  border-bottom-color: yellow;
  border-left-color: blue;
  border-right-color: green;
}
<div class="trangle"></div>
Copy after login

Step 2

Next, change the width of this div to 0, and let’s take a look at the effect. You can see that since the width of the div has become 0, the borders on the left and right sides are "sucked" together, and the upper and lower borders have become triangles. It seems that it is almost completed. Don't worry, look at the third step.

.trangle{
  width: 0px;
  height: 100px;
  border: 100px solid #000;
  border-top-color: red;
  border-bottom-color: yellow;
  border-left-color: blue;
  border-right-color: green;
}
<div class="trangle"></div>
Copy after login

The third step

Then, change the height of this div to 0, the effect is as follows. We can see that since the height of the div has also become 0, the upper and lower borders have also been "sucked" together, and at the same time the upper and lower borders have also become triangles. So far, four triangles have come out

.trangle{
  width: 0px;
  height: 0px;
  border: 100px solid #000;
  border-top-color: red;
  border-bottom-color: yellow;
  border-left-color: blue;
  border-right-color: green;
}
<div class="trangle"></div>
Copy after login

##Step 4

Finally, it depends on which corner you want. Just set the remaining three borders to transparent. For example, if I want the top triangle, then make the bottom, left, and right transparent. The code and effect are as follows:

.trangle{
  width: 0px;
  height: 0px;
  border: 100px solid #000;
  border-top-color: red;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}
<div class="trangle"></div>
Copy after login

##Simplified codeIn fact, we don’t need to set all four borders. We only need to set the borders of the three sides involved in the triangle you want to draw. Can. Taking the top triangle drawn in the previous step as an example, you only need to set the top, left, and right sides. If you want to top the triangle, set the left and right borders to transparent. The code and effect are as follows:

.trangle{
  width: 0px;
  height: 0px;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
}
<div class="trangle"></div>
Copy after login

( Learning video sharing:

css video tutorial

)

CSS realizes drawing various triangles (various angles)

Triangle Up


#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
Copy after login

Triangle Down


#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}
Copy after login

Triangle Left


##
#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}
Copy after login

Triangle Right

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}
Copy after login

Triangle Top Left


#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}
Copy after login

Triangle Top Right

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
 
}
Copy after login

Triangle Bottom Left


##

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}
Copy after login

Triangle Bottom Right


#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}
Copy after login
For more programming related knowledge, please visit:

Programming Video! !

The above is the detailed content of How to make a triangle in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!