使用CSS创建一个响应性的倾斜背景 [英] creating a responsive skewed background with css

问题描述

我正在尝试在我的网站上创建偏斜的背景.这些块都将具有倾斜的顶线和底线(如平行四边形).

I'm trying to create a skewed background on my website. The blocks will all have a skewed top and bottom line (like a parallelogram).

设计示例

使用CSS尝试过:

transform: skewY(-30deg);

，但是无法正常工作.对好的做法有什么想法?

but it's not working responsively. Any thoughts on a good practice?

推荐答案

这是一个开始，两者都很轻巧

Here is a start, both very lightweight

使用伪元素

.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>

使用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;
}

<div>
Some text
</div>
<div class="skew">
Some text
</div>
<div>
Some text
</div>

这篇关于使用CSS创建一个响应性的倾斜背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！