如何按照我的代码在背景形状中添加边框？

Question

最近，我在制作背景时遇到了一些问题，该背景在所有设备上都响应。有人在Stackoverflow上帮了我很大的忙，但是我们无法在蓝色和绿色形状的顶部和底部创建边框。可以用这段代码来做到这一点吗？还是我们需要其他解决方案？

提前感谢。

.box {
  padding:70px 50px;
  background:
    linear-gradient(to top    right,transparent 49.5%,blue  50%) top   ,
    linear-gradient(to bottom right,transparent 49.5%,green 50%) bottom,
    red;
  background-size:100% 20px;
  background-repeat:no-repeat;
  border-bottom:50px solid green;
  border-top:   50px solid blue;
  clip-path:polygon(0 0,100% 20px,100% calc(100% - 20px),0 100%);
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, ipsum et commodo semper, tellus orci ultricies elit, et volutpat dolor neque ac lectus. Fusce vel enim nulla. Nam a aliquam diam, vel mattis velit. Phasellus egestas suscipit lacus a ornare. Morbi luctus sapien nec metus faucibus rutrum. Integer hendrerit auctor libero, vitae imperdiet quam. Aliquam facilisis aliquam efficitur.

Ut dictum mauris a sagittis eleifend. Maecenas in libero et nibh sollicitudin ultricies. Nunc euismod luctus sapien sed malesuada. Sed eleifend a odio sit amet auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum condimentum tempor. Ut viverra venenatis diam tincidunt condimentum. Morbi vehicula dolor risus, eget sollicitudin ipsum semper venenatis. Nullam sollicitudin non libero sed tincidunt.

Quisque suscipit aliquam ipsum, vel convallis nisl pretium id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a magna ullamcorper, commodo nibh vel, venenatis sem. Nullam cursus lobortis diam, eu malesuada elit aliquet a. Vivamus rutrum erat libero, nec congue magna maximus sed. Vestibulum ut orci semper, consectetur ligula et, scelerisque nisl. Nulla sit amet ullamcorper nunc. Sed fringilla elit nec mollis aliquet. Sed tempor leo ac placerat tincidunt. Sed nisl purus, aliquam et fermentum vel, lacinia quis purus. Integer vulputate leo in eros molestie varius. Donec eu ante laoreet arcu eleifend pharetra. Quisque laoreet orci id justo posuere consectetur. Sed sodales tristique erat, nec viverra velit feugiat vel. Fusce quam nibh, pretium at turpis ut, vulputate sollicitudin dui. Fusce vulputate ex vitae dolor auctor efficitur.
</div>

Answer 1

尽管可能还有其他解决方案，但我可能为您准备了是这可以帮助您我正在使用pseudo code和transform:rotate来实现clip-path的边框

.box {
  padding:70px 50px;
  background:
    linear-gradient(to top    right,transparent 49.5%,blue  50%) top   ,
    linear-gradient(to bottom right,transparent 49.5%,green 50%) bottom,
    red;
  background-size:100% 20px;
  background-repeat:no-repeat;
  border-bottom:50px solid green;
  border-top:   50px solid blue;
  clip-path:polygon(0 0,100% 20px,100% calc(100% - 20px),0 100%);
  position: relative;
}

.box:before {
    content: '';
    width: 100%;
    height: 2px;
    background: #000000;
    position: absolute;
    bottom: -40px;
    left: 0;
    right: 0;
    transform: rotate(-2.3deg);
    border-left:1px solid #000;
}
.box:after {
   content: '';
    width: 100%;
    height: 2px;
    background: #000000;
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    transform: rotate(2.4deg);
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, ipsum et commodo semper, tellus orci ultricies elit, et volutpat dolor neque ac lectus. Fusce vel enim nulla. Nam a aliquam diam, vel mattis velit. Phasellus egestas suscipit lacus a ornare. Morbi luctus sapien nec metus faucibus rutrum. Integer hendrerit auctor libero, vitae imperdiet quam. Aliquam facilisis aliquam efficitur.

Ut dictum mauris a sagittis eleifend. Maecenas in libero et nibh sollicitudin ultricies. Nunc euismod luctus sapien sed malesuada. Sed eleifend a odio sit amet auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum condimentum tempor. Ut viverra venenatis diam tincidunt condimentum. Morbi vehicula dolor risus, eget sollicitudin ipsum semper venenatis. Nullam sollicitudin non libero sed tincidunt.

Quisque suscipit aliquam ipsum, vel convallis nisl pretium id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a magna ullamcorper, commodo nibh vel, venenatis sem. Nullam cursus lobortis diam, eu malesuada elit aliquet a. Vivamus rutrum erat libero, nec congue magna maximus sed. Vestibulum ut orci semper, consectetur ligula et, scelerisque nisl. Nulla sit amet ullamcorper nunc. Sed fringilla elit nec mollis aliquet. Sed tempor leo ac placerat tincidunt. Sed nisl purus, aliquam et fermentum vel, lacinia quis purus. Integer vulputate leo in eros molestie varius. Donec eu ante laoreet arcu eleifend pharetra. Quisque laoreet orci id justo posuere consectetur. Sed sodales tristique erat, nec viverra velit feugiat vel. Fusce quam nibh, pretium at turpis ut, vulputate sollicitudin dui. Fusce vulputate ex vitae dolor auctor efficitur.
</div>