Use the border attribute of CSS to implement triangle Conversion

Today, the woodpecker gave me an ice sword "em achieves inverted triangle tip effect". After careful consideration, the application is still very clever. It is also useful in real-world front-end development, which can at least reduce the bytes of the image.

Let's take a look at the application instance:

The original implementation is: Set the border attribute in a block element with a width and a height of 0 pixels, for example

. Box {width: 0px; Height: 0; border-bottom: 50px # f00 solid; border-left: 50px # 03f solid; border-Right: 50px # f90 solid; border-top: 50px #6c0 solid ;}

Display in the browser

Click to view Demo: http://www.css88.com/demo/border/border1.html

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.

For example, you can get an up triangle with the color # CCC:

. To-top {display: block; overflow: hidden; width: 0px; Height: 0px; Border: 6px solid # CCC; border-color: # CCC # FFF; border-width: 0 6px 6px 6px ;}

For more instances, click to view Demo: http://www.css88.com/demo/border/border.html