css3 border边框斜线,CSS3 斜线分割布局

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700);

body {

overflow: hidden;

}

.pyramid {

position: absolute;

width: 0;

height: 0;

bottom: 0;

transform: translate(-40%);

border-style: solid;

border-width: 0 720px 864px 720px;

border-color: transparent transparent #e8a653 transparent;

}

.sand {

position: absolute;

bottom: 0;

width: 100%;

height: 66%;

background: #ffbd4d;

}

.ternary-system {

position: absolute;

top: 5%;

right: 48%;

border-radius: 1px dotted rgba(0, 0, 0, 0.1);

}

.sun {

position: absolute;

border-radius: 50%;

background: #ffde72;

}

.sun.primary {

top: 150px;

left: -160px;

width: 20px;

height: 20px;

}

.sun.secondary {

top: 40px;

left: -60px;

width: 80px;

height: 80px;

}

.sun.ternary {

right: -650px;

width: 800px;

height: 800px;

}

.pendulums {

position: absolute;

width: 50px;

height: 200px;

left: 50%;

bottom: 60%;

perspective: 400px;

}

.pendulum {

position: absolute;

width: 50px;

height: 200px;

right: 44%;

top: 0;

left: 50%;

transform: translateZ(-300px) translateX(-50%);

}

.pendulum.shadow {

top: 263%;

left: -65%;

bottom: 0;

transform-origin: 50% 0;

transform: translateX(-50%) scaleY(-1) scaleZ(2) rotateY(-30deg) rotateX(-75deg) translateZ(300px);

}

.pendulum .bar {

position: absolute;

left: 50%;

transform: translateX(-50%);

bottom: 0;

display: block;

width: 20px;

height: 200px;

background: #333;

}

.pendulum .string {

position: absolute;

left: 50%;

transform: translateX(-50%);

width: 2px;

height: 150px;

background: #333;

}

.pendulum .weight {

position: absolute;

left: 50%;

transform: translateX(-50%);

bottom: 10px;

width: 50px;

height: 50px;

border-radius: 50%;

background: #333;

}

.pendulum .motion {

position: absolute;

height: 200px;

width: 50px;

transform-origin: 50% 10px;

animation: swing 1600ms infinite ease-in-out;

}

.pendulum.shadow .bar,

.pendulum.shadow .string,

.pendulum.shadow .weight {

background: #3d3a34;

}

.text {

position: absolute;

left: 50%;

transform: translateX(-50%);

bottom: 5%;

}

.title {

text-align: center;

font-size: 40px;

font-family: 'Oswald';

font-weight: 300;

text-transform: uppercase;

line-height: 1.3em;

margin: 0;

color: #222;

}

.title strong {

display: block;

font-weight: 700;

font-size: 2em;

line-height: 1em;

}

.title em {

font-style: normal;

font-weight: 400;

font-size: 1.6em;

line-height: 1em;

letter-spacing: 0.2em;

margin-left: 0.2em;

}

p {

font-family: 'Oswald';

color: #222;

margin: 0 17px;

padding: 0;

text-align: right;

}

@keyframes swing {

0% {

transform: rotate(-45deg);

}

50% {

transform: rotate(45deg);

}

100% {

transform: rotate(-45deg);

}

}