html三角形排序按钮,HTML5 三角形 | 棱形开关按钮控件

CSS

语言：

CSSSCSS

确定

body {

background-color: #6d5944;

font-family: sans-serif;

}

.toggle-container {

height: 40px;

margin: 100px auto;

width: 96px;

}

.toggle {

background-color: #b6aca2;

cursor: pointer;

height: 100%;

line-height: 0;

margin: 16px 0;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

width: 100%;

}

.toggle.active {

background-color: #ef5b30;

}

.toggle:before,

.toggle:after {

border-bottom: 20px solid transparent;

border-top: 20px solid transparent;

content: ' ';

height: 0;

position: absolute;

width: 0;

}

.toggle:before {

border-right: 19px solid #b6aca2;

margin-left: -19px;

}

.toggle:after {

border-left: 19px solid #b6aca2;

margin-left: 96px;

}

.toggle.active:before {

border-right-color: #ef5b30;

}

.toggle.active:after {

border-left-color: #ef5b30;

}

.toggle span {

line-height: 40px;

position: absolute;

text-align: center;

width: 96px;

}

.toggle .on,

.toggle.active .off {

-webkit-transition: margin 0.38s ease, color 0.19s ease;

transition: margin 0.38s ease, color 0.19s ease;

}

.toggle .off,

.toggle.active .on {

color: #fff;

margin-left: 0;

-webkit-transition: margin 0.38s ease, color 1s ease;

transition: margin 0.38s ease, color 1s ease;

}

.toggle .on {

color: transparent;

margin-left: -80px;

}

.toggle.active .off {

color: transparent;

margin-left: 80px;

}

.toggle .icon:before {

background-color: #ef5b30;

content: '';

height: 22px;

left: -8px;

position: absolute;

top: 9px;

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transition: all 0.4s ease;

transition: all 0.4s ease;

width: 22px;

z-index: 1;

}

.toggle.active .icon:before {

background-color: #fff;

left: 81px;

}