# 预览效果
# HTML 结构
| <div id="triangle"></div> |
| <div class="triangle-left"></div> |
| <div class="triangle-right"></div> |
| <div class="triangle-top"></div> |
| <div class="triangle-bottom"></div> |
# CSS 样式
| #triangle { |
| width: 0; |
| height: 0; |
| border: 50px solid transparent; |
| border-left: 50px solid #4ad3e2; |
| border-right: 50px solid #4ad3e2; |
| border-top: 50px solid #ffb1a3; |
| border-bottom: 50px solid #f9cb8f; |
| } |
| [class^=triangle] { |
| margin: 30px; |
| width: 0; |
| height: 0; |
| border: 50px solid transparent; |
| } |
| .triangle-left { |
| border-left: 50px solid #4ad3e2; |
| } |
| .triangle-right { |
| border-right: 50px solid #4ad3e2; |
| } |
| .triangle-top { |
| border-top: 50px solid #ffb1a3; |
| } |
| .triangle-bottom { |
| border-bottom: 50px solid #f9cb8f; |
| } |
# Stylus 样式
stylus index.styl -o index.css -w
| #triangle |
| width 0 |
| height 0 |
| border 50px solid transparent |
| border-left 50px solid #4ad3e2 |
| border-right 50px solid #4ad3e2 |
| border-top 50px solid #ffb1a3 |
| border-bottom 50px solid #f9cb8f |
| |
| [class^=triangle] |
| margin 30px |
| width 0 |
| height 0 |
| border 50px solid transparent |
| |
| .triangle-left |
| border-left 50px solid #4ad3e2 |
| |
| .triangle-right |
| border-right 50px solid #4ad3e2 |
| |
| .triangle-top |
| border-top 50px solid #ffb1a3 |
| |
| .triangle-bottom |
| border-bottom 50px solid #f9cb8f |
