css伪类底部,使用CSS3伪元素实现带角度的底部边界（倾斜的边界）

CSS

语言：

CSSSCSS

确定

.edge--bottom {

position: relative;

z-index: 1;

}

.edge--bottom:after {

background: inherit;

content: '';

display: block;

height: 50%;

left: 0;

position: absolute;

right: 0;

z-index: -1;

}

.edge--bottom:after {

bottom: 0;

-webkit-transform: skewY(-1.5deg);

-ms-transform: skewY(-1.5deg);

transform: skewY(-1.5deg);

-webkit-transform-origin: 100%;

-ms-transform-origin: 100%;

transform-origin: 100%;

}

.edge--bottom--reverse {

position: relative;

z-index: 1;

}

.edge--bottom--reverse:after {

background: inherit;

content: '';

display: block;

height: 50%;

left: 0;

position: absolute;

right: 0;

z-index: -1;

}

.edge--bottom--reverse:after {

bottom: 0;

-webkit-transform: skewY(1.5deg);

-ms-transform: skewY(1.5deg);

transform: skewY(1.5deg);

-webkit-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

transform-origin: 0 100%;

}

.edge--top {

position: relative;

z-index: 1;

}

.edge--top:before {

background: inherit;

content: '';

display: block;

height: 50%;

left: 0;

position: absolute;

right: 0;

z-index: -1;

}

.edge--top:before {

top: 0;

-webkit-transform: skewY(1.5deg);

-ms-transform: skewY(1.5deg);

transform: skewY(1.5deg);

-webkit-transform-origin: 100% 0;

-ms-transform-origin: 100% 0;

transform-origin: 100% 0;

}

.edge--top--reverse {

position: relative;

z-index: 1;

}

.edge--top--reverse:before {

background: inherit;

content: '';

display: block;

height: 50%;

left: 0;

position: absolute;

right: 0;

z-index: -1;

}

.edge--top--reverse:before {

top: 0;

-webkit-transform: skewY(-1.5deg);

-ms-transform: skewY(-1.5deg);

transform: skewY(-1.5deg);

-webkit-transform-origin: 0 0;

-ms-transform-origin: 0 0;

transform-origin: 0 0;

}

.edge--both {

position: relative;

z-index: 1;

}

.edge--both:before,

.edge--both:after {

background: inherit;

content: '';

display: block;

height: 50%;

left: 0;

position: absolute;

right: 0;

z-index: -1;

}

.edge--both:before {

top: 0;

-webkit-transform: skewY(1.5deg);

-ms-transform: skewY(1.5deg);

transform: skewY(1.5deg);

-webkit-transform-origin: 100% 0;

-ms-transform-origin: 100% 0;

transform-origin: 100% 0;

}

.edge--both:after {

bottom: 0;

-webkit-transform: skewY(-1.5deg);

-ms-transform: skewY(-1.5deg);

transform: skewY(-1.5deg);

-webkit-transform-origin: 100%;

-ms-transform-origin: 100%;

transform-origin: 100%;

}

.edge--both--reverse {

position: relative;

z-index: 1;

}

.edge--both--reverse:before,

.edge--both--reverse:after {

background: inherit;

content: '';

display: block;

height: 50%;

left: 0;

position: absolute;

right: 0;

z-index: -1;

}

.edge--both--reverse:before {

top: 0;

-webkit-transform: skewY(-1.5deg);

-ms-transform: skewY(-1.5deg);

transform: skewY(-1.5deg);

-webkit-transform-origin: 0 0;

-ms-transform-origin: 0 0;

transform-origin: 0 0;

}

.edge--both--reverse:after {

bottom: 0;

-webkit-transform: skewY(1.5deg);

-ms-transform: skewY(1.5deg);

transform: skewY(1.5deg);

-webkit-transform-origin: 0 0;

-ms-transform-origin: 0 0;

transform-origin: 0 0;

}

.-berry {

background: #b52b4a;

}

.-blue {

background: #41ade5;

}

.-orange {

background: #de6628;

}

.-green {

background: #5e9b42;

}

.block {

color: #fff;

font-family: 'Fira Sans', sans-serif;

margin: 0 0 200px;

padding: 20% 20px;

text-align: center;

}

h1 {

font-size: 32px;

font-weight: 500;

}

p {

font-size: 14px;

font-weight: 300;

margin-top: 0.5em;

}