Use css3 to implement various triangle style collections in web pages (principle analysis)

坏嘻嘻
Release: 2019-11-23 14:57:01
Original
51821 people have browsed it

When you browse web pages, you often see various shapes, such as circles, squares, rectangles, triangles, etc. Today I specially made a tutorial on using CSS to implement triangles. How to write CSS triangles? Woolen cloth? What is the principle of implementing triangles in css?

Recommended Manual: css Online Manual

Please take a look at the detailed examples.

(Related video tutorial recommendation: CSS tutorial)

css3 triangle usage scenario

We know that one special effect is a span drop-down list. That is to say, when the mouse is placed on a div, the originally hidden content or secondary menu will appear. Such a drop-down list will highlight a small triangle pointing to the original div area block, as shown in the figure:

Use css3 to implement various triangle style collections in web pages (principle analysis)

So let’s summarize now how we write these triangles.

CSS3 triangle implementation principle

In css3, we mainly use a transparent attribute, which means transparent. For example, we will If the font is set to black, we will write color: black. If we want to set the font color to transparent, we can write color: transparent. In the same way, background-color:transparent can set the background to be transparent.

8 classifications of triangles

We divide triangles into 8 types according to their position:

triangle up,triangle down,triangle left,triangle right,triangle top left,triangle top right,triangle bottom left和triangle bottom right。
Copy after login
Related article recommendations:
1.Use CSS to realize sharp corners, small triangles, and sharp corners in different directions on the page
2.How to draw a triangle using css3? Introduction to the principles of drawing triangles in css3
Related video recommendations:
1.CSS Video Tutorial-Jade Girl Heart Sutra Edition

8 Examples of Triangle Implementation

1.triangle up upper triangle

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

2.triangle down lower triangle

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

3.triangle left left triangle

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

4.triangle right right triangle

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

5.triangle top left upper left triangle

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

6.triangle top right upper right triangle

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

7.triangle bottom left lower left triangle

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

8 .triangle bottom right Lower right triangle

#triangle-bottomright{
width:0;
height:0;
border-bottom:100px solid black;
border-left:100px solid transparent;
}
Copy after login

The approximate effect is as shown in the figure:

Use css3 to implement various triangle style collections in web pages (principle analysis)

The above is the detailed content of Use css3 to implement various triangle style collections in web pages (principle analysis). 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