css绘制三角形 border

目录

一、深入理解border

1、border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：
border-width
border-style
border-color
如果不设置其中的某个值，也不会出问题。

2、border边框的数量不是固定四个。
可参考：border-left、border-right、border-top、border-bottom深入理解
简单来说：
可分为模块（eg：div）有宽高、宽高有一个为0、宽高都为0
1）有宽高

• 4个border时：等腰梯形

.box {
    border-right: 55px solid red; 
    width: 200px; height: 200px; 
    border-bottom: 55px solid blue;
    border-left: 55px solid yellow;
    border-top: 55px solid green;
}

• 3个border时：缺口部分不再是斜的，变成了水平线。
  
• 同理当只有2个border时，切口全部变成水平或者垂直

2）宽高有一个为0

.box {
    border-right: 55px solid red; 
    width: 200px; height: 200px; 
    border-bottom: 55px solid blue;
}

.box {
  border-top: 55px solid red;
  width: 200px;
  height: 200px;
  border-bottom: 55px solid blue;  
}

1.宽不为0，高为0

• 4个边
  

• 3个边
  

• 2个边
  

有宽，有border-top或者border-bottom。
有高，有border-left或者border-right

3）宽高都为0

• 4个border
  

• 3个border
  

• 2个border（相邻）
  

二、border属性设置方式

1、同时设置border属性的width、color等值时，有四种方式：

例1：border-width:thin medium thick 10px;

• 上边框是细边框
• 右边框是中等边框
• 下边框是粗边框
• 左边框是 10px 宽的边框

注意顺序为：上右下左

例2：border-width:thin medium thick;

• 上边框是 10px
• 右边框和左边框是中等边框
• 下边框是粗边框

例3：border-width:thin medium;

• 上边框和下边框是细边框
• 右边框和左边框是中等边框

例4：border-width:thin;

• 所有 4 个边框都是细边框

2、也可以分别设置border-left、border-right、border-top、border-bottom的属性值
例如：

 /* 等腰三角形（箭头朝上）； */
    #div1{
        width: 0;
        height: 0;
        border-bottom: 100px solid cyan;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
    }

三、绘制不同类型的三角形

可参考：
1、如何使用HTML+CSS画三角形
2、CSS绘制三角形—border法

1、等腰三角形（箭头朝上）

 /* 等腰三角形（箭头朝上）； */
    #div1{
        width: 0;
        height: 0;
        border-bottom: 100px solid cyan;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
    }

2、等腰三角形（箭头朝下）

/* 等腰三角形（箭头朝下）； */
   #div2{
       width: 0;
       height: 0;
       border-top: 100px solid cyan;
       border-left: 50px solid transparent;
       border-right: 50px solid transparent;
    }

3、等腰三角形（箭头朝左）

 /* 等腰三角形（箭头朝左）； */
    #div3{
         width: 0;
         height: 0;
         border-right: 100px solid cyan;
         border-top: 50px solid transparent;
         border-bottom: 50px solid transparent;
     }

4、等腰三角形（箭头朝右）

 /* 等腰三角形（箭头朝右）； */
    #div4{
          width: 0;
          height: 0;
          border-left: 100px solid cyan;
          border-top: 50px solid transparent;
          border-bottom: 50px solid transparent;
      }

5、直角三角形（箭头左上）

  /* 直角三角形（箭头左上）；隐藏右下的border */
    #div5{
         width: 0;
         height: 0;
         border: 50px solid gray;
         border-right: 50px solid transparent;
         border-bottom: 50px solid transparent;
     }

6、直角三角形（箭头右下）

/* 直角三角形（箭头右下）；/隐藏左上的border */
   #div6{
         width: 0;
         height: 0;
         border: 50px solid lightblue;
         border-left: 50px solid transparent;
         border-top: 50px solid transparent;
     }

汇总：