纯CSS三角箭头，点击排序

css

.triangle {
    display: inline-block;
    border-top: 8px solid #000;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    cursor: pointer;
}

.triangle-rotate-1 {
    transform-origin:center center;
    transform: rotate(180deg);
    transition: .3s;
}

.triangle-rotate-2 {
    transform-origin:center center;
    transform: rotate(0deg);
    transition: .3s;
}

JS

/*   箭头排序   */
$('.triangle').on('click', function () {
    if ($(this).hasClass('triangle-rotate-1')) {
        $(this).removeClass('triangle-rotate-1').addClass('triangle-rotate-2')
    } else {
        $(this).removeClass('triangle-rotate-2').addClass('triangle-rotate-1')
    }
});