首页 > 代码库 > css画小三角

css画小三角

要点:

  • div的宽度设为0
  • border-color 的transparent属性
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <title>Document</title>    <style>        .tri{            margin: 60px;            border: 10px solid ;             /*width: 0;  要有,不设置宽度的话,默认div的100%宽度,三角会跑到最右边*/            /*border-color: red transparent transparent transparent;*/             border-color:  transparent red transparent transparent;            /*border-color:  transparent transparent red transparent;*/            /*border-color:  transparent transparent transparent red;*/            /*outline: 1px solid green;*/        }    </style></head><body>    <div class="tri">            </div></body></html>

 

css画小三角