css graphing - triangles

　　　　　　css drawing a triangle --border

　　　　　　This is the most common method of using the border are often ---- width (1-2px), which would allow us to form the border of misunderstanding,

　　　　That is considered border element is formed by splicing together four rectangular border.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
    .border{
            width:100px;
            height:100px;
            border:3px solid pink;
            
        } 
        </ Style > 
    </ head > 
    < body > 
        < div ID = "" class = "border" > </ div > 
        < H6 > This is the most common boder method </ H6 > 
    </ body > 
</ HTML >

　　　　　　If we increase the width of the border, then it

　　　　Indeed, a combination of border element is formed by a triangle, To address this question, we can increase the width of the border, and sides of a different color for the border:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
    .border{
        width: 50px;
            height: 50px;
            border: 40px solid;
        border-color: orange blue red green;
            
        }
        </style>
    </head>
    <body>
        <div id="" class="border"></div>
        
    </body>
</html>

　　　　　　Then we will border to what kind of situation will happen then 0

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
    .border{
        width: 0px;
            height: 0px;
            border: 40px solid;
        border-color: orange blue red green;
            
        }
        </style>
    </head>
    <body>
        <div id="" class="border"></div>
        
    </body>
</html>

　　　　　effect:

　　　　　　At this time, the elements of the triangle down about 4 "stitching" together; we want to achieve, then the triangle,

　　　　We only need to set up additional border for a white or clear ( transparent ) on it

　　　　"Hidden" from the border still occupy space, so that the triangle size in order to minimize the draw, but also on the width of the border is set to 0 (otherwise Similarly):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
    .border{
        width: 0px;
            height: 0px;
            border: 40px solid;
        border-color:transparent transparent red ;
            
        }
        </style>
    </head>
    <body>
        <div id="" class="border"></div>
        
    </body>
</html>

　　　　　　effect:

　　　　　　In this case, we triangle on it, the same way, if we want the other side of the triangle, just to the rest of the border edge color to white or transparent color can be .

　　　Achieve triangle with border

　　　　The most natural way is triangular stacked, i.e. stacked on top of the current triangle larger triangle implementation shown in the figure is placed on the gray triangle pink triangle larger dimensions.

　　Then we need to use absolute positioning

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
    .border{
        position:relative;
        width: 0px;
            height: 0px;
            border: 40px solid;
        border-color:transparent transparent pink ;
            
        }
        .border:after{
            content:"";
            position:absolute;
            top:3px;
            left:-35px;
            width:0;
            height:0;
            border-width:0px 35px 35px;
            border-style:solid;
            border-color:transparent transparent gray;
        }
        </style>
    </head>
    <body>
        <div id="" class="border"></div>
        
    </body>
</html>

　　　　Realize triangular arrow:

　　We just need to stack up on top of the triangle to the color to white, then positioning adjustment

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
    .border{
        position:relative;
        width: 0px;
            height: 0px;
            border: 40px solid;
        border-color:transparent transparent pink ;
            
        }
        .border:after{
            content:"";
            position:absolute;
            top:3px;
            left:-40px;
            width:0;
            height:0;
            border-width:0px 40px 40px;
            border-style:solid;
            border-color:transparent transparent #fff;
        }
        </style>
    </head>
    <body>
        <div id="" class="border"></div>
        
    </body>
</html>