<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
<!--         border-style =边框线条
                solid 实线
                dashed 虚线 
                想要针对某一个单独位置设置边框颜色或大小等
                如：border-left-style    中间可以填写任意方向
                -->
        <style>
            div{
                width: 500px;
                height: 500px;
                border-style: solid;
                border-left-width: 10px;
                border-color: chocolate;
                border-left-style: blue;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
#创建三角形
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    body{
      background-color: green;
    }
      #div1{
        width: 0px;
        height: 0px;
        
        border-top-style: solid;
        border-top-width: 10px;
        border-top-color: transparent;
        
        border-right-style:solid;
        border-right-width:10px;
        border-right-color: transparent;
        
        border-bottom-style:solid;
        border-bottom-width: 10px;
        border-bottom-color: blue;
        
        border-left-style: solid;
        border-left-width: 10px;
        border-left-color: transparent;
      }
    </style>
  </head>
  <body>
    <div id="div1"></div>
  </body>
</html>