CSS画三角形

2021-02-07 107 阅读1分钟

第一步:
原理:利用css盒子模型的border
在这里插入图片描述

  .theory{
            padding: 30px;
            border-top: 50px solid red;
            border-bottom: 50px solid blue;
            border-left: 50px solid green ;
            border-right: 50px solid yellow;
  }
  
 <div class="theory">内容</div>
123456789

可以看出边框的的四个边成了梯形,如果把内容变成空和padding 都变成0呢
在这里插入图片描述

  .theory{        
            border-top: 50px solid red;
            border-bottom: 50px solid blue;
            border-left: 50px solid green ;
            border-right: 50px solid yellow;
  }
  
 <div class="theory"></div>
12345678

但是还有宽度
再把宽度设成0呢

  .theory{        
  	    width:0;
            border-top: 50px solid red;
            border-bottom: 50px solid blue;
            border-left: 50px solid green ;
            border-right: 50px solid yellow;
  }
  
 <div class="theory"></div>
123456789

在这里插入图片描述
三角形出现了,这时就把颜色去掉
右箭头:

   .theory{
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 50px solid green ;
            border-right: 0;
        }
12345678

在这里插入图片描述

同理可以得到上下左右四个箭头