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平行四邊形切割邊框圖案

回答

相關問題