css实现三角形

css实现三角形

  <div></div>

方式一：
1、div设置宽高为0
2、给它四个边设置为透明色
3、给想要保留的三角形对应的边框设置指定的颜色

方式二：（用伪元素实现）
1、元素（举例：div）：：after {
代码如下
}

 /* 方式一 */
         /* div{
             width: 0;
             height: 0;
             border: 100px solid transparent;
             border-top: 100px solid red;
         } */


         
        /* 方式二 */
        body{
            position:relative;
        }
         div::after{
             content:"";
             display:block;
             width:0;
             height:0;
             border:100px solid transparent;
             border-top:100px solid red;
             position:absolute;
             /* 自己去调整，放到想要放的位置即可 */
             top:0px;
             left:0px;

         }