Front-end small tips, pure css3 in each direction small triangle production principle, tipscss3

Front-end small tips, pure css3 in each direction small triangle production principle, tipscss3

 

Two months later, I wrote the first article in my blog, hoping to achieve three principles:

One: Do not waste your time,

Tow: Do not waste the reader's time,

The third is to hope that interested friends will give you more advice and share the fun of the front-end !!!

 

 

 

Let's make a small tips necessary for home travel today to show the wisdom and culture of our predecessors...

Let's take a look at it. [it will be used in the future, so you don't have to worry about it]

Sifang triangle (top, bottom, left, right)

Sharp backlash, color/* Set edges */

The two-side clip is transparent/* set the edge */

The parameters are the same./* the line parameters are the same */

Give three sides/* have three sides */

 

Eight sides of the triangle (upper left, lower left, upper right, lower right)

Transparency on the left and right sides/* edge setting */

Same upper and lower colors/* Set edges */

Send you two sides/* convenient, just two sides */

 

 

 

Code on the Buddy: Give a pear

Sifang laijiaoCan other containers be used for a div box (up, up, up? (You have never tried it. It's enough)

<div class="up"><div/>

 

. Up {position: absolute;/* depending on the situation */border-left: 30px solid transparent;/* tip, left, transparent to the right */border-right: 30px solid transparent;/* 30px can control the triangle size */border-bottom: 30px solid black;/* tip, opposite line, color */width: 0; height: 0;/* whether to add the width and height of 0. Test it on your own. The blogger has tried it and can skip it */}

The result is: Ignore the mouse)

 

 

 

 

 

Code on Buddy (2)

Review the tips and go up...

Then, let's take a pear (left-top, and top-left ")

<div class="left-top"><div/>

 

. Left-top {position: relative; border-top: 30px solid lawngreen;/* set the color if no top or bottom is the same */
Border-right: 30px solid transparent;/* opposite to left and right, transparent */width: 0;/* set only two edges */height: 0 ;}

 

(Perfect !!)

The phrase can be fully used. The main advantage is that you don't need to remember the source code. The hand-written css shows the perfect feeling on the webpage: "This feel is cool, it is cool ..."

 

Main purposes:

"Small triangle pointing in the navigation bar"

"Nothing else has been found yet, haha .."

If Comrade Tom sees this article, contact me. The cainiao sees Tom and the boys are tearful.

Lucky to be seen by the great gods, it is a lucky thing to be born, hope to guide one or two

 

 

 

So far, the blog of the small triangle tips has been playing, and the principle can be understood or not understood. There are a lot of source code on the Internet and it can be used directly, but it does not conform to our valuable geek spirit.

Come and read "geek spirit, geek spirit .."

 

Credits declaration:

The principle of this article is the blogger's own collection and understanding. After testing, there is no problem at all. Of course, there are other ways to achieve this effect, front-end bloggers have the same interests. Please follow me or me.

Follow you

 

Final payment:

16-03-10,

The environment is good,

Happy landlords around roommates