css div部分之间的倾斜双色分隔线

z9zf31ra 于 2023-04-01 发布在其他

关注(0)|答案(1)|浏览(238)

我正试图解决如何在div之间添加一个排序的双边框倾斜分隔符（可能有也可能没有背景渐变/背景图像，所以我不认为传统的带有背景颜色的伪元素会起作用）。
我通过在两个主要div之间创建一个类为'slant'的div来生成下面的代码。

.slant {
    width: 100%;
    position: relative;
    z-index: 1;
    margin-top: -32px;
}

.slant:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 32px;
    background: linear-gradient(360deg, var(--soft-blue) 0%, var(--soft-blue) 50%, var(--light-pink) 50%, var(--light-pink) 100%);
    transform-origin: bottom left;
    transform: skewY(2.5deg);
    margin-top: -24px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-background-clip: content-box;
    background-clip: content-box;
}

下面的div有clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 100%);，它与倾斜对齐，但随着div大小或屏幕大小的变化，这最终会错位。我想我正在努力解决倾斜度和clip-path百分比之间的差异。我也可能以完全错误的方式处理这个问题！任何关于如何以响应方式最好地实现这种效果的建议都将受到欢迎。谢谢您。

css

来源：https://stackoverflow.com/questions/75869396/slanted-two-color-divider-between-div-sections

1条答案

按热度按时间

toe950271#

使用伪元素制作整个东西，甚至背景部分。

.box {
  height: 400px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.box:before {
  content:"";
  position:absolute;
  z-index: -1;
  inset:0;
  transform-origin: left;
  transform: skewY(5deg);
  background:
    /* the double border */
    linear-gradient(purple 50%,green 0) top/100% 20px no-repeat,
    /* the main background */
    linear-gradient(45deg,pink,lightblue);
}

<div class="box"></div>

赞(0）回复(0）举报 2023-04-01

我来回答

css div部分之间的倾斜双色分隔线

1条答案

相关问题

热门标签

最新问答