时间戳

首页 > 解决方案 > Bootstrap 网格的倾斜边框

html - Bootstrap 网格的倾斜边框

问题描述

如何使用 HTML 和 CSS 实现这种设计？我需要一个倾斜的右边框，同时保持左侧背景图像 + 内容（紫色网格）和右侧网格上的背景图像。它应该是这样的：

在此处输入图像描述

这就是我到目前为止所得到的:(

<div class="container">
    <div class="row">
      <div class="col-sm-6 left">
        <h4>Q3 content</h4>
        <p>Ugit ut remporat utem aut poriorem. Tem reptium ium inumquam verum asi ut odio. Ped que senturi berspient harios doluptaquate re dellectatis imint, nimoloreste si idus, te reria velibusVelluptur sendus. Emolecti acid modiscipsam untetum esequunt es siminti uscipsandi dolent min rem aut exped moleseniam reprem et quamus mintur andipsa ndiaessuntem qui aut lacerspit, cumquiant et aut reiciis et autem rehento il est, sequi dio qui ommo te rem utemLectatem. Nam reperna turion nullest aut ea none net eatio qui cum nus aliquodi omnis</p>
      </div>
        <div class="col-sm-6 right">
        </div>
    </div>
</div>

和我的 CSS：

.container .row { }
.left {
  background-color: #4D316B;
  color: #fff;
 }
.left:after {
   position: absolute;
        z-index: 20;
        content: "";
        right: 0;
        top: 0;
        height: 100%;
        width: 20px;
        background: #F8BE15;
        -webkit-transform: skewX(20deg);
        -moz-transform: skewX(20deg);
        -ms-transform: skewX(20deg);
        transform: skewX(20deg);
 }
.right {
  background: url(https://placeimg.com/640/480/any);
}

它不一定是左网格的右边框，它可以是任何代码格式，只要它是移动响应的（当网格堆叠时，倾斜的边框可以在移动设备上更改为简单的底部或顶部边框）。

这是它现在的样子。一支新笔将不胜感激。

标签： htmlcsstwitter-bootstrap

解决方案

另一种方法：自然顺序分层而不是z-index, 和overflow: hidden遮罩。

https://codepen.io/ouroborus/pen/OJXVRgY

.use-background {
    position: relative;
}
.use-background .background {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.use-background .background *, 
.use-background .background *::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform-origin: top left;
}
.use-background .background .left {
}
.use-background .background .left::after {
    content: '';
    display: block;
    background: #4D316B url() center no-repeat;
    background-size: cover;
}
.use-background .background .right {
    left: 50%;
    border-left: 20px #F8BE15 solid;
    overflow: hidden;
    -webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    transform: skewX(20deg);
}
.use-background .background .right::after {
    content: '';
    display: block;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    transform: skewX(-20deg);
    background: #888 url(https://placeimg.com/640/480/any) center no-repeat;
    background-size: cover;
}

<div class="container">
    <div class="row use-background">
        <div class="background">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="col-sm-6 left">
            <h4>Q3 content</h4>
            <p>Ugit ut remporat utem aut poriorem. Tem reptium ium inumquam verum asi ut odio. Ped que senturi berspient harios doluptaquate re dellectatis imint, nimoloreste si idus, te reria velibusVelluptur sendus. Emolecti acid modiscipsam untetum esequunt es siminti uscipsandi dolent min rem aut exped moleseniam reprem et quamus mintur andipsa ndiaessuntem qui aut lacerspit, cumquiant et aut reiciis et autem rehento il est, sequi dio qui ommo te rem utemLectatem. Nam reperna turion nullest aut ea none net eatio qui cum nus aliquodi omnis</p>
        </div>
        <div class="col-sm-6 right">
        </div>
    </div>
</div>

推荐阅读