css直接写出小三角

在开发移动端项目时，总是遇到很多小三角，之前一直用图片，感觉好麻烦，今天尝试了直接用CSS写出小三角！
先看看如何写出各种小三角！

 　　　　　　　　　/*箭头向上*/

                 .arrow-up {

                         width:;

                         height:;

                         border-left:30px solid transparent;

                         border-right:30px solid transparent;

                         border-bottom:30px solid #000;

                 }

                  /*箭头向下*/

                 .arrow-down {

                         width:;

                         height:;

                         border-left:30px solid transparent;

                         border-right:30px solid transparent;

                         border-top:30px solid #000;

                 }

                  /*箭头向左*/

                 .arrow-left {

                         width:;

                         height:;

                         border-top:30px solid transparent;

                         border-bottom:30px solid transparent;

                         border-right:30px solid #000;

                 }

                 /*箭头向右*/

                 .arrow-right {

                         width:;

                         height:;

                         border-top:30px solid transparent;

                         border-bottom: 30px solid transparent;

                         border-left: 30px solid #000;

                 }

                 /*:after 伪元素在元素之后添加内容实现小三角*/

                 .box{ width:300px; height:300px; background:#838383; position:relative;}

                 .box:after{

                     position:absolute;

                     right:-20px;

                     top:10px;

                     display:block;

                     content:"";

                     width:;

                     height:;

                     border-top:20px solid transparent;

                     border-bottom: 20px solid transparent;

                     border-left: 20px solid #838383;

                 }