Html CSS 斜角与 3 行对齐

发布于01月26日

请看下面的附图.我想用纯css来保存它.这意味着我只在寻找一个只有css的解决方案.

使用这段css代码，我可以根据需要获得中间行(查看图像).但不适用于顶排和底排.问题是倾斜Angular 不像图像一样对齐.

.slider-single {
  position: relative;
  background: #f5f5f5;
  padding-top: 70px;
  padding-bottom: 70px;
}

.slider-single::before {
  content: "";
  position: absolute;
  background: #0072c6;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  transform: skewX(-16deg) translateX(-50%);
  z-index: -1;
}

.skew-bar-top {
  position: absolute;
  height: 40px;
  background: red;
  width: 100%;
  top: 0;
  left: 0;
}

.skew-bar-top::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #21255d;
  transform: skewX(-16deg) translateX(-50%);
}

<div class="slider">
  <div class="slider-single with-bg img">
    <div class="skew-bar-top"></div>
    <div class="container">
      <div class="row align-items-center">
        <div class="col-md-6 col-lg-6">
          -- contents
        </div>
        <div class="col-md-6 col-lg-6">
          -- contents
        </div>
      </div>
    </div>
    <div class="skew-bar-bottom"></div>
  </div>
</div>

.container { height: 400px; border: solid #0000; border-width: 50px 0; /* control the width of the top/bottom border */ background: /* the middle gradient */ linear-gradient(110deg, blue 50%,red 50.1%) padding-box, /* the border gradient*/ linear-gradient(110deg,red 50%,yellow 50.1%) border-box; background-origin: border-box; background-clip: padding-box,border-box; }

.container { height: 300px; border-top: 50px solid #0000; padding-bottom: 60px; background: /* the middle gradient */ linear-gradient(110deg,purple 50%,green 50.1%), /* the top gradient */ linear-gradient(110deg,blue 50%,red 50.1%), /* the bottom gradient*/ linear-gradient(110deg,red 50%,yellow 50.1%); background-origin: border-box; background-clip: content-box,padding-box,border-box; }

Html CSS 斜角与 3 行对齐

推荐答案

Html相关问答推荐

从收件箱获取内部HTML值

角｜将动态html属性添加到子组件

Select 包含iframe的图形<><>

如何修复与导航栏重叠的css网格？

assets资源净值元素不会扩展到涵盖子项

轨道上的居中范围滑块拇指(Webkit)

如何在页面太短时使<；img&>缩小而不发生y溢出

Vutify中看不见的V行

try 更新我的Node.js应用程序中的用户，但我收到错误.然而，当我使用postman 时，更新工作正常

如何使链接组件内的内容不重新路由Next.js13

如何使用css在响应图像后面添加形状？

如何居中此按钮，即使它已经在计算机分辨率中居中

：：可点击图标之前

在 flexbox 中使用 spacer 是否有效

一旦大于最大限制，JQuery 取消 Select 复选框

网页爬虫：使用时光机器进行数据采集

在React中如何处理HTML本地日期输入？

CSS 网格自动高度不适用于特定网格区域

将固定/绝对伪元素放置在相对 div(具有滚动条)内，始终位于底部

用 flexbox 和 overflow 覆盖