时间戳

首页 > 解决方案 > 创建倾斜响应背景

html - 创建倾斜响应背景

问题描述

我正在寻找这种背景。而且我不得不承认我遇到了麻烦......找不到好的方法。

例如，我尝试过transform : skewY(-6deg)。但-6deg我的整个页面。

有人可以帮我找到这样做的好方法吗？

这是设计示例的图片

谢谢您的帮助 ！

标签： htmlcssbackground

解决方案

您可以使用多个背景和渐变：

.box {
  height:250px;
  padding:50px 0;
  background:
    linear-gradient(to bottom left,transparent 49%,#0060ff 50%)top/100% 50px,
    linear-gradient(#0060ff,#0060ff) center/100% calc(100% - 100px),
    linear-gradient(to top right,transparent 49%,#0060ff 50%)bottom/100% 50px,
    
    
    linear-gradient(to bottom right,transparent 49%,#00dbf8 50%)top/100% 50px;
  background-repeat:no-repeat;
}
<div class="box">
</div>

您可以使用 CSS 变量使其更灵活，以便轻松控制倾斜：

.box {
  height:150px;
  padding:var(--p,50px) 0;
  background:
    linear-gradient(to bottom left,transparent 49%,#0060ff 50%)top/100% var(--p,50px),
    linear-gradient(#0060ff,#0060ff) center/100% calc(100% - 2*var(--p,50px)),
    linear-gradient(to top right,transparent 49%,#0060ff 50%)bottom/100% var(--p,50px),
    
    
    linear-gradient(to bottom right,transparent 49%,#00dbf8 50%)top/100% var(--p,50px);
  background-repeat:no-repeat;
}
<div class="box">
</div>
<hr>
<div class="box" style="--p:100px;">
</div>
<hr>
<div class="box" style="--p:40px;">
</div>

推荐阅读