还有种三道扛的方法

.sanheng1{

width:30px;

height:3px;

border-top:9px double;

border-bottom:3px solid;

border-color:black;

}

你的CSS代码里差边框border属性值；至于为啥是八边形，可能是你浏览器的问题，具体的为啥不清楚。

三条线     a:before{ content:"";display:inline-block; width:10px; height:2px; padding:2px 0; border-top:2px solid; border-bottom:2px solid; background-clip:content-box; background-color:#000;}

圆点  a::before{content:"";display:inline-block;width:10px; height:10px; padding:2px; border-radius:50%; border:2px solid #000; background-color:#000; background-clip:content-box;}

常见的状态微元素为a的那几个状态。

：before,:after,一般都和content，一起使用。最常有的是清除浮动。

clearfix{*zoom:1}

.clearfix:after{content:'';display:block;clear:both;}

background-origin  是背景图片的定位方式,你这是用背景颜色填充的,当然不会有效果

把最后的content-box改成你的名字bordertest，然后就好啦。我的是这样：

.line-tri{

width: 150px;

height: 30px;

padding: 15px 0;

border-top: 30px solid green;

border-bottom: 30px solid red;

background: orange;

background-clip: line-tri;

}

http://www.w3school.com.cn/cssref/pr_border.asp,如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的

样式里面的class写错了，没有加点。