html5 绘制空心 三角形

.border-up{width: 0;height: 0;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 100px solid #333;position: relative;margin: 0px auto;}
        .border-up span{display: block; width: 0;height: 0;border-left: 96px solid transparent;border-right: 96px solid transparent;border-bottom: 96px solid #FFFFFF;position: absolute;left: -96px;top: 2px;}
        .border-down{width: 0;height: 0;border-left: 100px solid transparent;border-right: 100px solid transparent;border-top: 100px solid #333;position: relative;margin: 0px auto;}
        
        .border-down span{display: block;width: 0;height: 0;border-left: 96px solid transparent;border-right: 96px solid transparent;border-top: 96px solid #FFFFFF;position: absolute;left: -96px;top: -98px;}
 .rectangle {
       
        width:100px;
        height:330px;
        border:solid 2px;
        margin:0px auto;
        border-top:none;<