css三角形做法

4.css三角形做法:

利用边框斜切的特性

注意:必须要设置宽度和高度为0

 .box{
    
    
            width: 0;
            height: 0;
            border:50px solid transparent;//先设置边框为透明
            border-top:50px solid red;
        }//再设置需要边的颜色,即可都得一个三角形
      <div class="box">

    </div>

在这里插入图片描述

直角三角形做法,就是设置两条边宽即可,需要哪条设置哪条

 .box{
    
    
            width: 0;
            height: 0;
            border:50px solid transparent;
            border-top:50px solid red;
            border-left: 50px solid red;
            /* border-right: 50px solid red; */
            /* border-bottom: 50px solid red; */
            
        }

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_46372132/article/details/132212365