Html CSS平行四边形切边图案
我想了解一下，是否有可能开发一个类似于通过CSS代码显示的边界模式。我考虑过通过类似Photoshop的程序制作图案，然后将边框的背景设置为Photoshop制作图案的url。如果我想通过编码来实现这一点，我将如何遇到浏览器兼容性问题？能够使用笔直的css创建非常相似的边框 首先，在之前，生成了一个包含3条条纹线的框-一条红色、一条蓝色、一条米色。还添加了米色边框 然后，在：after伪元素中，只给长方体一个米色背景（使用渐变背景也可能看起来更好） 请查看：Html CSS平行四边形切边图案,html,css,Html,Css,我想了解一下，是否有可能开发一个类似于通过CSS代码显示的边界模式。我考虑过通过类似Photoshop的程序制作图案，然后将边框的背景设置为Photoshop制作图案的url。如果我想通过编码来实现这一点，我将如何遇到浏览器兼容性问题？能够使用笔直的css创建非常相似的边框 首先，在之前，生成了一个包含3条条纹线的框-一条红色、一条蓝色、一条米色。还添加了米色边框 然后，在：after伪元素中，只给长方体一个米色背景（使用渐变背景也可能看起来更好） 请查看： <!DOCTYPE html&
<!DOCTYPE html>
<html>
<head>
<style>
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%;
}
</style>
</head>
<body>
<p class="box"></p>
</body>
</html>
p、 盒子：之前{
内容：''；
位置：绝对位置；
z指数：-1；
宽度：100%；
身高：100%；
背景：重复线性渐变(
45度，
hsl（60,56%，81%）0px，
hsl（60,56%，81%）4倍，
红色5px，
红色14px，
hsl（60,56%，81%）15px，
hsl（60,56%，81%）20px，
hsla（247,83%，37%，1）21px，
hsla（247,83%，37%，1）30px
),
线性梯度(
归根结底，
rgba（48,26,255,1），
rgba（85、66、255、1）
);
边界：5px固体hsl（60,56,81%）；
}
p、 盒子：之后{
内容：''；
位置：绝对位置；
右图：-.5%；
底部：-2.5%；
背景：hsl（60,56%，81%）；
z指数：-1；
身高：97%；
宽度：97%；
}
边框图像