DIV+CSS实现的小三角

两年前写的东西，前几天项目里又用到了，贴在这里，记录下。实现效果：

这里的小三角方向是可以改变的，包括向上、向下、向右、以及这里的向左。

HTML代码：

<!-- 外框 --> < div class = "mod-container" >      <!-- 小三角部分 -->      < div class = "mod-triangle" >          < div class = "t-border" ></ div >          < div class = "t-inset" ></ div >      </ div > </ div >

CSS代码：

/*外框容器*/ .mod-container {      width : 100px ;      height : 60px ;      border : 1px solid #000 ;      margin : 20px ;      background : #fff ; } /*小三角部分*/ .mod-triangle {      display : block ;      position : relative ;      left : -23px ;      top : 18px ;      z-index : 20 ; } .mod-triangle .t-border, .mod-triangle .t- inset {      left : 0px ;      top : 0px ;      width : 0 ;      height : 0 ;      font-size : 0 ;      overflow : hidden ;      position : absolute ;      border-width : 12px ;      /*可在此处更改小三角方向：上-右-下-左（solid的位置）*/      border-style : dashed solid dashed dashed ; } /*小三角的边框，如果不需要，可将颜色值改变*/ .mod-triangle .t-border{      border-color : transparent #000 transparent transparent ;      left : -1px ; } .mod-triangle .t- inset {      border-color : transparent #fff transparent transparent ; }