CSS画个三角形

1.画三角形干嘛？或者问它能干吗？

三角形在开发中经常用到，比如气泡，箭头，等一些标示指向的图形或者需求。

2.怎么三角形？

很简单，利用边框属性：border。

1.第一步画一个矩形

• 画一个矩形，边框宽度设置为40px,
• 上下左右边框的颜色分别使用不同的颜色

• 矩形宽高都是40px,背景色红色。

  
  
  

  初始样子

css:

    .triangle{
        width: 40px; /* 矩形宽度 */
        height:40px; /* 矩形高度 */
        background: red; /* 矩形背景颜色*/
        border-width: 40px;/* 边框宽度 */
        border-style: solid;/* 边框为实线 */
        border-color: #3385ff #ffab00 #00ff00 #BF974D;/* 边框颜色 上  右  下  左*/
    }

2.出现三角形

• 矩形宽高都设置为0

• 取消背景颜色

  
  
  

  四个三角形已出现

  3.要哪一个三角形？

• 想保留哪一个三角形就把其他的三角形边框颜色设置为透明

• border-color分别设置上右下左为非透明，其他边框为透明

    .triangle{
        width: 0px;
        height:0px;
        border-width: 40px;/* 边框宽度 */
        border-style: solid;/* 边框为实线 */
        border-color: #3385ff transparent transparent transparent;
        /*border-color: transparent #ffab00 transparent transparent;*/
        /*border-color: transparent transparent #00ff00 transparent;*/
        /*border-color: transparent transparent transparent #BF974D;*/
    }
  

三角形