CSS border实现各个方向等腰直角三角效果实例页面

代码：

CSS代码：
.border_cort, .border_corr, .border_corb, .border_corl {
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 6px;
    overflow: hidden;
}
.border_cort {
    border-color: #333 transparent transparent;
    border-style: solid dotted dotted;
}
.border_corr {
    border-color: transparent #333 transparent transparent;
    border-style: dotted solid dotted dotted;
}
.border_corb {
    border-color: transparent transparent #333;
    border-style: dotted dotted solid;
}
.border_corl {
    border-color: transparent transparent transparent #333;
    border-style: dotted dotted dotted solid;
}
HTML代码：
<span class="border_cort"></span>
<span class="border_corb"></span>
<span class="border_corl"></span>
<span class="border_corr"></span>

效果：