Detailed explanation of simple examples of triangle implementation in css-CSS Tutorial-php.cn

Detailed explanation of simple examples of triangle implementation in css

高洛峰

Release： 2017-03-07 14:49:28

Original

1665 people have browsed it

In many page productions, a triangle will be designed to highlight. Here is a design method that is compatible with various browsers:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .corner-top{   
            width:0px;    
            height:0px;   
            font-size:0;               
            border-width:20px;     
            border-style:solid dashed dashed dashed;     
            border-color:#e66161 transparent transparent transparent;   
        }   
        .corner-bottom{   
            width:0px;    
            height:0px;   
            font-size:0;               
            border-width:20px;     
            border-style:dashed dashed solid dashed;     
            border-color:transparent transparent #94e24f transparent;   
        }   
        .corner-left{   
            width:0px;    
            height:0px;   
            font-size:0;               
            border-width:20px;     
            border-style:dashed dashed dashed solid;     
            border-color:transparent transparent transparent #85bfda;   
        }   
        .corner-right{   
            width:0px;    
            height:0px;   
            font-size:0;               
            border-width:20px;     
            border-style:dashed solid dashed dashed;     
            border-color:transparent #f3bb5b transparent transparent;   
        }   
    </style>
</head>
<body>
    <p class="corner-top"></p>
    </br>
    <p class="corner-bottom"> </p>
    </br>
    <p class="corner-left"> </p>
    </br>
    <p class="corner-right"> </p>
</body>
</html>

Copy after login

Main points to note:

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

2. In order to improve the scalable row, set the border color to be transparent, but transparent will be gray in IE. The compatible method is to set the corresponding border style to dashed;

3. In the project, you will generally choose to use absolute Positioning positions the triangle to the corresponding position, but sometimes it is not necessary to use an inverted triangle. The result is that there are multiple heights in the container. The method is to set the height of the container, and then overflow: hidden; (the principle of triangle design is known)

The above simple example of implementing a triangle in pure CSS is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more detailed examples of simple examples of using css to implement triangles, please pay attention to the PHP Chinese website for related articles!