html四边形的的框怎么编写,CSS平行四边形切割边框图案

能够使用直线css制作一个非常相似的边框。

首先，在之前，生成了一个包含3个条纹的盒子 - 一个红色，一个蓝色，一个米色。此外还添加了米色边框。

然后，在：伪元素之后，只给了一个米色的背景(也许可以用渐变背景看起来更好)。

检查出来：

p.box:before{

content: '';

position: absolute;

z-index: -1;

width: 100%;

height: 100%;

background:repeating-linear-gradient(

45deg,

hsl(60, 56%, 81%) 0px,

hsl(60, 56%, 81%) 4px,

red 5px,

red 14px,

hsl(60, 56%, 81%) 15px,

hsl(60, 56%, 81%) 20px,

hsla(247, 83%, 37%, 1) 21px,

hsla(247, 83%, 37%, 1) 30px

),

linear-gradient(

to bottom,

rgba(48, 26, 255, 1),

rgba(85, 66, 255, 1)

);

border: 5px solid hsl(60, 56%, 81%);

}

p.box:after{

content: '';

position: absolute;

right: -.5%;

bottom: -2.5%;

background: hsl(60, 56%, 81%);

z-index: -1;

height: 97%;

width: 97%;

}