Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use CSS to achieve triangles. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

I believe that when you browse the website, you often see a variety of drop-down menus, there will be a small triangle, to achieve this triangle will generally think of using pictures or iconfont, but in fact this triangle in addition to using pictures and iconfont, with css can also be achieved. The practice of making triangles is mainly made of borders. Observe the following code:

(you can focus on the red code)

Make triangles with frame

* {padding: 0; margin: 0; list-style: none;}

.box {width: 50px; height: 50px; margin:100px auto;}

.box {

Border-top:100px solid red

Border-right:100px solid lime

Border-bottom:100px solid blue

Border-left:100px solid yellow

}

A box with 50px*50px width and height, with four different 100px color frames added above and below, the effect is as shown in the figure:

The method of making Triangle by CSS

It is conceivable that if you set the width and height of the box to 0, four triangles of different colors will be displayed, as follows:

Make triangles with frame

* {padding: 0; margin: 0; list-style: none;}

.box {width:0; height:0; margin:100px auto;}

.box {

Border-top:100px solid red

Border-right:100px solid lime

Border-bottom:100px solid blue

Border-left:100px solid yellow

}

The effect is as follows:

The method of making Triangle by CSS

If you want to get a single triangle, you have to hide the other triangles, so let's take a look at the value of the transparent property first.

Description:

RGBA (RMagna Gregory BMaga)

Value:

R:

Red value. Positive integer | percentage

G:

Green value. Positive integer | percentage

B:

Blue value. Positive integer | percentage

A:

Alpha transparency. The value is between 0 and 1.

Description:

Used to specify a fully transparent color.

Transparent is a shorthand for all transparent black (black), that is, a value similar to rgba.

In CSS1, transparent is used as a parameter value of background-color to indicate background transparency.

In CSS2, border-color also begins to accept transparent as a parameter value.

In CSS3, transparent is extended to any attribute that has a color value.

With the attribute value of transparent, we can hide the unnecessary border and realize the triangle we want. The code is as follows:

Make triangles with frame

* {padding: 0; margin: 0; list-style: none;}

.box {width:0; height:0; margin:100px auto;}

.box {

Border-top:100px solid red

Border of border-right:100px solid transparent;/* transparent color * /

Border of border-bottom:100px solid transparent;/* transparent color * /

Border of border-left:100px solid transparent;/* transparent color * /

}

This is the end of the article on "how to use CSS to achieve triangles". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.