CSS平行四边形切割边框图案

我想知道是否有可能通过CSS代码开发像here显示的边框图案。我已经考虑通过类似Photoshop的程序制作图案，然后将边框的背景设置为photoshop制作的图案的网址。如果我希望通过编码来实现这一点，我该如何处理浏览器兼容性问题？CSS平行四边形切割边框图案

来源

2015-09-28 Mr-Kimbles

'边境image'确实是要走的路。 [兼容性真的很好（http://caniuse.com/#feat=border-image）假设人们不要忽略Windows更新（每个人都应该* *是在IE11如果他们使用IE浏览器，但是，好。 ..） –

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

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

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

检查出来：

<!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>

来源

2015-09-29 00:02:38

哇，奇妙的即兴！ –

CSS平行四边形切割边框图案

回答

相关问题