trAvis - MANAGER
Edit File: plus-shape-divider.css
/*Tp Shape Divider*/ .tp-plus-shape-divider,.tp-plus-shape-divider .wave-items{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; } .tp-plus-shape-divider.shape-bottom{ -webkit-transform: rotateX(180deg); transform: rotateX(180deg); bottom: auto; top: 100%; } .tp-plus-shape-divider.shape-bottom.flip-bottom { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); bottom: 0; top: auto; } .tp-plus-shape-divider.shape-top{ top: auto; bottom: 100%; } .tp-plus-shape-divider.shape-top.flip-top { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); top: 0; bottom: auto; } .tp-plus-shape-divider.shape-wave,.tp-plus-shape-divider .wave-items{ height: 200px; } .tp-plus-shape-divider.shape-right { height: 110px !important; bottom: 0; left: 100%; right: auto; -webkit-transform: translate3d(0,0,0) rotate(-90deg) rotateX(180deg); transform: translate3d(0,0,0) rotate(-90deg) rotateX(180deg); transform-origin: 0% 100%; width: 100%; z-index: 1; } .tp-plus-shape-divider.shape-right.flip-right { transform: translate3d(0,0,0) rotate(-90deg) rotateX(0deg); } .tp-plus-shape-divider.shape-left { height: 110px !important; bottom: 0; left: 0; -webkit-transform: translate3d(0,0,0) rotate(-90deg) rotateX(0deg); transform: translate3d(0,0,0) rotate(-90deg) rotateX(0deg); transform-origin: 0% 100%; width: 100%; z-index: 1; } .tp-plus-shape-divider.shape-left.flip-left { -webkit-transform: translate3d(0,0,0) rotate(-90deg) rotateX(180deg); transform: translate3d(0,0,0) rotate(-90deg) rotateX(180deg); } .tp-plus-shape-divider.shape-right svg.wave-items { width: 100%; height: 200px; } .tp-plus-shape-divider.shape-left svg.wave-items { width: 100%; height: 200px; } /*shape-1*/ .tp-plus-shape-divider.shape-shape-1.shape-bottom { transform: translateX(-50%) rotate(90deg); -webkit-transform: translateX(-50%) rotate(90deg); height: 200px; width: 44px; left: 50%; bottom: -78px; top: auto; } .tp-plus-shape-divider.shape-shape-1.shape-bottom.flip-bottom { bottom: -122px; } .tp-plus-shape-divider.shape-shape-1.shape-top { transform: translateX(-50%) rotate(90deg) rotateX(180deg); -webkit-transform: translateX(-50%) rotate(90deg) rotateX(180deg); height: 200px; width: 44px; left: 50%; bottom: auto; top: -122px; } .tp-plus-shape-divider.shape-shape-1.shape-top.flip-top { top: -78px; } .tp-plus-shape-divider.shape-shape-1.shape-bottom.flip-bottom .shape-1,.tp-plus-shape-divider.shape-shape-1.shape-top.flip-top .shape-1{ transform: rotate(180deg); -webkit-transform: rotate(180deg); } .tp-plus-shape-divider.shape-shape-1.shape-right,.tp-plus-shape-divider.shape-shape-1.shape-left { height: 200px !important; width: 44px !important; top: 50%; bottom: auto; transform: translate3d(0,-50%,0) rotateY(180deg); transform-origin: right; right: 0; left: auto; } .tp-plus-shape-divider.shape-shape-1.shape-left { right: 100%; transform: translate3d(0,-50%,0); transform-origin: left; } .tp-plus-shape-divider.shape-shape-1.shape-right.flip-right { transform: translate3d(0,-50%,0); } .tp-plus-shape-divider.shape-shape-1.shape-left.flip-left { transform: translate3d(0,-50%,0) rotate(180deg); left: 44px; } .tp-plus-shape-divider.shape-shape-1 .shape-1-icon { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%,-50%) rotate(-90deg); -webkit-transform: translate(-50%,-50%) rotate(-90deg); font-size: 30px; line-height: 1em; color: #fff; cursor: pointer; } .tp-plus-shape-divider.shape-shape-1.shape-right .shape-1-icon,.tp-plus-shape-divider.shape-shape-1.shape-left .shape-1-icon{ transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); } .tp-plus-shape-divider.shape-shape-1 .shape-1-url { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } /*shape-1*/ @media (max-width:767px){ .tp-plus-shape-divider.shape-wave.shape-right, .tp-plus-shape-divider.shape-wave.shape-left { display:none; } } /*Tp Shape Divider*/