# 预览效果
# HTML 结构
| <div class="triangle-left"></div> |
| <div class="triangle-right"></div> |
| <div class="triangle-top"></div> |
| <div class="triangle-bottom"></div> |
# CSS 样式
- 给上两条边框并旋转下即可，例如：
- 需要
> 这个方向的，那么就需要左下边框
- 需要
< 这个方向的，那么就需要右上边框
| [class^=triangle] { |
| margin: 50px auto; |
| width: 20px; |
| height: 20px; |
| transform: rotate(45deg); |
| } |
| .triangle-left { |
| border-left: 4px solid #4ad3e2; |
| border-bottom: 4px solid #4ad3e2; |
| } |
| .triangle-right { |
| border-right: 4px solid #4ad3e2; |
| border-top: 4px solid #4ad3e2; |
| } |
| .triangle-top { |
| border-left: 4px solid #4ad3e2; |
| border-top: 4px solid #4ad3e2; |
| } |
| .triangle-bottom { |
| border-right: 4px solid #4ad3e2; |
| border-bottom: 4px solid #4ad3e2; |
| } |
# Stylus 样式
stylus index.styl -o index.css -w
| [class^=triangle] |
| margin 50px auto |
| width 20px |
| height 20px |
| transform rotate(45deg) |
| |
| .triangle-left |
| border-left 4px solid #4ad3e2 |
| border-bottom 4px solid #4ad3e2 |
| |
| .triangle-right |
| border-right 4px solid #4ad3e2 |
| border-top 4px solid #4ad3e2 |
| |
| .triangle-top |
| border-left 4px solid #4ad3e2 |
| border-top 4px solid #4ad3e2 |
| |
| .triangle-bottom |
| border-right 4px solid #4ad3e2 |
| border-bottom 4px solid #4ad3e2 |
