Bootstrap 4 boostrap4.1:2个重叠列

如何在boostrap 4中制作这个

我用这个：

.outer1:after {
box-sizing: border-box;
content: '';
position: absolute;
top: 50%;
margin-top: 0;
top: 0;
right: -10px;
background-color: #ededed;
width: 40%;
height: 100%;
border-radius: 5px;
-webkit-transform: skewX(-12deg);
-ms-transform: skewX(-12deg);
transform: skewX(-12deg);
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform-origin: bottom right;
}

但它不会在专栏之后显示

---

我能做些什么来解决这个问题？

也许可以使用

剪辑路径：多边形

但浏览器支持可能有限

此外，您还必须针对特定的分栏点使用媒体查询进行定制，以便作出响应

参见示例

---

欢迎来到SO。请校对并检查您的帖子的语法和格式。

.col-4 {
  overflow-y: visible;
}

.poly-1:after {
  content: '';
  position: absolute;
  top: 0;
  right: -20%;
  background-color: #ededed;
  border-radius: 5px;
  clip-path: polygon(10% 0%, 90% 0%, 70% 100%, 10% 100%);
  width: 140%;
  height: 100%;
  z-index: -1;
}

.poly-2:after {
  content: '';
  position: absolute;
  top: 0;
  right: -20%;
  background-color: #ededed;
  border-radius: 5px;
  clip-path: polygon(30% 0%, 90% 0%, 70% 100%, 10% 100%);
  width: 140%;
  height: 100%;
  z-index: -1;
}

.poly-3:after {
  content: '';
  position: absolute;
  top: 0;
  right: -20%;
  background-color: #cd2122;
  border-radius: 5px;
  clip-path: polygon(30% 0%, 90% 0%, 90% 100%, 10% 100%);
  width: 140%;
  height: 100%;
  z-index: -1;
}