我试图在我的网站上创建一个倾斜的背景。这些块都有一个倾斜的顶部和底部线(如平行四边形)。
尝试使用css:
transform: skewY(-30deg);
但它没有响应。对良好做法的任何想法?
答案 0 :(得分:4)
这是一个开始,非常轻量级
使用伪元素
.wrapper div.skew::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 120vw;
height: 100%;
transform: translate(-50%, -50%) rotate(-30deg) skew(-30deg);
background: lightgray;
z-index: -1;
}
.wrapper {
overflow: hidden;
}
.wrapper div {
position: relative;
padding: 50px;
border: 1px dashed gray;
text-align: center;
}
.wrapper div.skew::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 120vw;
height: 100%;
transform: translate(-50%, -50%) rotate(-30deg) skew(-30deg);
background: lightgray;
z-index: -1;
}

<div class="wrapper">
<div>
Some text
</div>
<div class="skew">
Some text
</div>
<div>
Some text
</div>
</div>
&#13;
使用linear-gradient
html {
background: linear-gradient(
-30deg,
transparent 40%,
#bbb 40%,
#bbb 60%,
transparent 60%);
}
html {
background: linear-gradient(
-30deg,
transparent 40%,
#bbb 40%,
#bbb 60%,
transparent 60%);
}
div {
position: relative;
padding: 50px;
border: 1px dashed gray;
text-align: center;
}
&#13;
<div>
Some text
</div>
<div class="skew">
Some text
</div>
<div>
Some text
</div>
&#13;
答案 1 :(得分:0)
我非常喜欢杰里米·弗兰克的css生成内容方法 - 他甚至在他的文章中提供了一个很酷的SASS-Mixin: https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms
我使用这种变化很多:
/*
* Angled-edges
*/
@mixin angle($pseudo, $flip: false, $use-background-color: false, $angle: 3deg) {
// $pseudo: before, after, both
@if $pseudo == 'before' or $pseudo == 'after' or $pseudo == 'both' {
position: relative;
z-index: 1;
$selector: if($pseudo == 'both', '&:before,&:after', '&:#{$pseudo}');
#{$selector} {
@if $use-background-color {
background: $color__background-body;
} @else {
background: inherit;
}
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
-webkit-backface-visibility: hidden;
}
@if $pseudo == 'before' {
#{$selector} {
top: 0;
@if $flip {
transform: skewY($angle * -1);
transform-origin: 0 0;
} @else {
transform: skewY($angle);
transform-origin: 100% 0;
}
}
}
@if $pseudo == 'after' {
#{$selector} {
bottom: 0;
@if $flip {
transform: skewY($angle);
transform-origin: 0 100%;
} @else {
transform: skewY($angle * -1);
transform-origin: 100%;
}
}
}
@if $pseudo == 'both' {
&:before {
top: 0;
@if $flip {
transform: skewY($angle * -1);
transform-origin: 0 0;
} @else {
transform: skewY($angle);
transform-origin: 100% 0;
}
}
&:after {
bottom: 0;
@if $flip {
transform: skewY($angle);
transform-origin: 0 0;
} @else {
transform: skewY($angle * -1);
transform-origin: 100%;
}
}
}
}
}