Use the border attribute of css to implement triangular Effect

The tutorial for helping customers home (www.bkjia.com) Today, xiaobian saw an article on the blog garden about the introduction. The original Implementation of triangle without pictures, you can use css, have you ever thought about it? Let's take a look.

Reference content is as follows: . Box { Width: 0; Height: 0; Border-bottom: 50px # F00 solid; Border-left: 50px # 03F solid; Border-right: 50px # F90 solid; Border-top: 50px #6C0 solid; }

In this way, there will be up, down, left, and right triangles, and then set the color of the other three triangles (border) except the used triangle to the background color.
A non-Cartesian triangle can be obtained when the upper and lower sides are inconsistent with the Left and Right border-width.

<Style>. box {width: 0; height: 0; border-bottom: 50px # F00 solid; border-left: 50px # 03F solid; border-right: 50px # F90 solid; border-top: 50px #6C0 solid; }</style> <div class = box> </div> <br/> <center> for more tutorials, visit: <a href = http://www.bkjia.com/target = _ blank _ fcksavedurl = "http://www.bkjia.com/target = _ blank"> http://www.bkjia.com/</a> </center>

Tip: the code can be modified before running!