A simple example of CSS for triangulation

In many page production will be designed to highlight a triangle, below gives a compatible with a variety of browser design methods:

<! DOCTYPE html>

Key points to note:

1. font-size:0; function is compatible with IE, or IE will appear trapezoidal, or line-height:0;

2. In order to improve the extensible line, set the border color transparent, but the transparent in IE will have gray, compatible method is to set the corresponding border style of dashed;

3. In the project will generally choose to use absolute positioning to position the triangle to the corresponding location, but sometimes the use of inverted triangle is also can not use, the result is a lot of height in the container, the method is to set the height of the container, and then overflow:hidden; (Triangular design principle)

Above this pure CSS to achieve a simple example of the triangle is the small part of the whole content to share to everyone, I hope to give you a reference, but also hope that we support topic.alibabacloud.com.