Bootstrap

css clip-path裁剪 边框颜色问题设置

使用clip-path 对于div样式裁剪 原有的border样式 会被裁掉 遇到相同父级的背景颜色 会导致裁剪部分边界显示视觉错乱

.mySection.common-layout{
  width: 100%;
  height: 100%;
  background: #c7d6f7;
  clip-path: polygon()!important;
  border: 1px solid #c7d6f7;
  &::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    clip-path: inherit;
    background: #fff;
    z-index: -1;
  }
}

添加伪元素进行背景覆盖 这样裁剪边角颜色 会被背景颜色覆盖

;