css制作三角形

这个图形忘了在哪里见过的，不过见过有一些网站有这种图形。我这里做了一个简单的练习，希望帮到有需要的人。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图形</title>
        <style type="text/css">
            
            #demo{
                width:100px;
                height:100px;
                background-color:#fff; 
                border: 2px black solid;  
                position: relative;    
            }
            
            
            #demo:after{
                content: "";
                position: absolute;
                top:30px;
                left: 88%;
                width: 20px;
                height: 20px;
                border:2px solid black;
                
                transform: rotate(45deg);
                
                background: white;
                
                border-color: black  black transparent  transparent; 
                
                //border: 12px solid transparent;
                //border-left-color: #fff;
            }
            
            
            
    
        </style>
    </head>
    <body>
        
        <div id="demo"></div>
        
    </body>
</html>

View Code