Question

如何在boostrap 4中制作一个？

https://s8.postimg.cc/uqj2riib9/image.png

我正在使用：

.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;
}

但是它不会在该列之后显示。

该如何解决？

Answer 1

也许使用clip-path: polygon可能会限制浏览器。

此外，您必须自定义以针对特定列断点使用媒体查询进行响应。

查看示例... https://jsfiddle.net/joshmoto/64k27zrw/

.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;
}

boostrap4.1：2个重叠的列

1 个答案: