CSSを使用して水平方向と垂直方向の破線を繰り返し作成する

Question

いくつかの例を試しましたが、左上から余白を設定することはできません。

enter image description here

Answer 1

あなたは、一般的に2つの線形中継勾配をネストすることによって、このパターンを作成することができます。グラデーションを含むストライプを作成するには、Stripes in CSSを参照してください。

左から右に1つのグラデーションを作成し、上から下に別のグラデーションを作成し、最終結果は画像のようにグリッドになります。答えを

div { 
 
    background-color: seagreen; 
 
    width: 500px; 
 
    height: 500px; 
 
    position: relative; 
 
} 
 
div::after { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
    background: repeating-linear-gradient(to right, transparent, transparent 98px, white 100px, white 100px), repeating-linear-gradient(to bottom, transparent, transparent 98px, white 100px, white 100px);

<div></div>