自学前端-（css三角制作和箭头制作）

一、三角制作

原理：定义一个盒子，将盒子的宽高为0，将盒子的表框线条变粗，然后将所有的边框设置为透明，而后设置其中一条边为一种颜色，即可完成

border: 10px solid transparent;
        border-bottom-color: tomato;

高级三角：

原理：定义一个盒子，将盒子的宽高为0，通过修改四个边框的大小，来调整三角形

box1 {
        width: 0;
        height: 0;
        /* 
        将上边框宽度调大
        border-top: 100px solid transparent;
        border-right: 50px solid blue;
        左边框和下边框宽度调整为0；
        border-bottom: 0 solid red;
        border-left: 0 solid green; */

        /* 精简写法 */
        /* 顺序分别是：上右下左 */
        border-color: transparent red transparent transparent;
        border-style: solid;
        /* 顺序分别是：上右下左 */
        border-width: 100px 50px 0 0;
      }