用css样式画三角形（提示框三角形）

转载自https://blog.csdn.net/hope_It/article/details/70217954

• 经常用于提示框，下拉菜单等（csdn也很多用到，最后一图）

• 三角形画法

• html结构 
  
   
  
• 三角形画法 
  • 用border画出，当width、height均为100px时

•     .triangle {
          width: 100px;
          height: 100px;
          border-left: 10px solid #7d7b7b;
          border-top: 10px solid #5851c3;
          border-right: 10px solid #21a4d6;
          border-bottom: 10px solid #4ed621;
          box-sizing: border-box;
      }

•  

• –>结果： 
  改变{width:0; height:0}–>

  –>再去掉border-top—>

  –>可以看见上面的一半已经没有了

  –>设置左右两边border-color:transparent; –>  
  –>就得到了想要的三角形了，这是向上的，想要哪边就画哪边的border,并且让它相邻两边的border-color:transparent

  –>代码

      .triangle {
          width: 0;
          height: 0;
          border-left: 10px solid transparent;
          /*border-top: 10px solid #5851c3;*/
          border-right: 10px solid transparent;
          border-bottom: 10px solid #4ed621;
          box-sizing: border-box;
      }

•  

• 画提示框三角形（有边缘的）

  如图：

• 原理：先画一个三角形，再画白色三角形的，调整几像素位置，覆盖掉一边

• –> 

• 代码

•  .triangle {
          position: relative;
          width: 100px;
          height: 50px;
          border: 2px solid #4ed621;
          border-radius: 5px;
      }
  
      .triangle:before {
          position: absolute;
          content: "";
          top: -10px;
          left: 25px;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-bottom: 10px solid #4ed621;
      }
      /* 白色覆盖*/
      .triangle:after {
          position: absolute;
          content: "";
          /*减少两像素*/
          top: -8px;
          left: 25px;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-bottom: 10px solid #fff;
      }
        
  

•  

• 结果： 
  –> –>

• 至此，三角形画完，只用到了css2的属性，兼容性一览无余
• 推荐一款优秀的在线画图工具，很不错（不是广告啊！）