代码之家 › 专栏 › 技术社区 › Cannon Moyer

如何使用CSS创建倾斜背景?[副本]

background css html

Cannon Moyer · 技术社区 · 8 年前

我附上了一张照片来显示确切的布局。照片中的线条只是为了显示颜色应该在哪里变化。

下面是一些我尝试过的代码,但看起来不是我想要的。

.block {
  background-color: black;
  left: -50;
  height: 150px;
  width: 100%;
  transform: rotate(-40deg);
}

<body>
  <div class="block">

  </div>
</body>

3 回复 | 直到 7 年前

Temani Afif 6 年前

可以将伪元素与倾斜变换一起使用:

body {
  height: 100vh;
  margin: 0;
  background: yellow;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  background: #000;
  transform: skew(-30deg);
  transform-origin:top;
}

要在调整大小时保持相同的视觉效果,请设置大的伪图元的固定高度及其居中:

html {
  background: yellow;
}

html:before {
  content: "";
  position: fixed;
  top: calc(50% - 1000px);
  left: 0;
  width: 500px;
  height:2000px;
  background: #000;
  transform: skew(-15deg);
  transform-origin:top;
}

Paulie_D 8 年前

以一定角度使用线性渐变

body {
 margin:0;
 }

div {
  height: 100vh;
  background: linear-gradient(105deg, black 25%, yellow 25%)
}

<div></div>

Vladimir JovanoviÄ 8 年前

.left-sidebar {
  position: absolute;
  width: 20%;
  background: #000;
  transform: skewY(5px);
}
.content {
  background: #fff;
}

“弯曲”的属性 div 此属性是否在CSS中 transform: skew(X,Y) .试试看,希望有帮助。

但我建议您创建2 部门 并排以获得所需的效果。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前