border三角形组件

border-arrow.css

/*
 *@ Name:       border三角形组件
 *@ Update:     2013-08-04
 */

.arrow {
    font-size: 0;
    width: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
    display: inline-block;
    *display:inline;
    *zoom:1;
    vertical-align: -2px;
    border: 0 dashed transparent;
    border-width: 6px;
}

/* ▲ */
.arrow-top {
    border-bottom-style: solid;
    border-bottom-color: #333;
}

/* 右三角 */
.arrow-right {
    border-left-style: solid;
    border-left-color: #333;
}

/* ▼ */
.arrow-bottom {
    border-top-style: solid;
    border-top-color: #333;
}

/* 左三角 */
.arrow-left {
    border-right-style: solid;
    border-right-color: #333;
}

/* ◤ */
.arrow-left-top {
    border-top-style: solid;
    border-top-color: #333;
    border-left-width: 0 !important;
}

/* ◥ */
.arrow-right-top {
    border-top-style: solid;
    border-top-color: #333;
    border-right-width: 0 !important;
}

/* ◣ */
.arrow-left-bottom {
    border-bottom-style: solid;
    border-bottom-color: #333;
    border-left-width: 0 !important;
}

/* ◢ */
.arrow-right-bottom {
    border-bottom-style: solid;
    border-bottom-color: #333;
    border-right-width: 0 !important;
}