Home > Article > Web Front-end > Detailed explanation of simple examples of triangle implementation in css

Detailed explanation of simple examples of triangle implementation in css

高洛峰Original: 2017-03-07 14:49:281644browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of basic usage examples of CSS descendant selectorNext article：Detailed explanation of basic usage examples of CSS descendant selector

See more

Detailed explanation of simple examples of triangle implementation in css

Related articles