CSSグラジエントを使用した角度付きメッシュパターン

Question

こんにちは。私は上記の結果を達成したいと思いますが、私が考え出すことのできる最高のものはthis codepenです。どんな良いアイデアですか？

body { 
    background-color: #0200ff; 
    background-size: 65px 65px, 65px 65px; 
    background-image: 
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 1px, transparent 1px, transparent 46px), 
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 1px, transparent 1px, transparent 46px); 
    color: white; 
} 

Answer 1

このソリューションは、私たちのために働いhttps://codepen.io/kelonye/pen/BdPJqp?editors=1100：

.bg { 
    position: absolute; 
    top: -200px; 
    left: -200px; 
    right: -200px; 
    bottom: -200px; 
    background-color: #0200ff; 
    z-index: 100; 
    background-image: linear-gradient(rgba(39,38,255,1) 1px, transparent 1px), 
    linear-gradient(90deg, rgba(39,38,255,1) 1px, transparent 1px); 
    background-size: 60px 60px, 60px 100px, 20px 20px, 20px 20px; 
    background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px; 
    -webkit-transform: rotate(-15deg); 
}