css 和 css3 实用例子

收集 css3 实用样式表, 内包含 less 和 sass 实用工具

三角形

上三角形

.up {
    width: 0;
    height: 0;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
    border-bottom: 50px solid red;
}

显示效果

下三角形

.down {
    width: 0;
    height: 0;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
    border-top: 50px solid red;
}

显示效果

左三角形

.left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 50px solid red;
}

显示效果

右三角形

.right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid red;
}

显示效果

箭头

上箭头

.top-arrow {
    position: relative;
    height: 20px;
}

.top-arrow:before,
.top-arrow:after {
    position: absolute;
    content: '';
    border-top: 10px transparent dashed;
    border-left: 10px transparent dashed;
    border-right: 10px transparent dashed;
    border-bottom: 10px #fff solid;
}

.top-arrow:before {
    border-bottom: 10px red solid;
}

.top-arrow:after {
    top: 1px;
    border-bottom: 10px #fff solid;
}

显示效果

左箭头

.left-arrow {
    position: relative;
    height: 20px;
}

.left-arrow:before,
.left-arrow:after {
    position: absolute;
    content: '';
    border-top: 10px transparent dashed;
    border-left: 10px transparent dashed;
    border-bottom: 10px transparent dashed;
    border-right: 10px #fff solid;
}

.left-arrow:before {
    border-right: 10px red solid;
}

.left-arrow:after {
    left: 1px;
    border-right: 10px #fff solid;
}

显示效果