どうも！LSSです！！
では、ながらく方法を思いつけなかった事が、「強引ながら」解決・実現したのですが…その後「強引じゃない上にコード量も少なく、綺麗にレンガ模様を描く」方法を思いついてしまいました。
レンガ模様
コード
<style>
.conicrenga{
height:150px;
font:120% bold;
padding:0.6em;
background:
conic-gradient(at 5% 45%,#ccaaaa 90deg,transparent 90deg) 0px 0px/40px 40px
,conic-gradient(at 5% 45%,#ccaaaa 90deg,transparent 90deg) 20px 20px/40px 40px
,#eeeeee;
}
</style>
<div class="conicrenga">conic-gradient を使うと、実にスッキリ、かつ強引さもなく、綺麗にレンガ模様が描けてしまいました！</div>
赤太字部分が、レンガ模様を実現しているCSS指定になります。
コード中の色指定について
background:
conic-gradient(at 5% 45%,#ccaaaa 90deg,transparent 90deg) 0px 0px/40px 40px
,conic-gradient(at 5% 45%,#ccaaaa 90deg,transparent 90deg) 20px 20px/40px 40px
,#eeeeee;
↑の色を付けた３か所、この「#ccaaaa」がレンガの色、「#eeeeee」が目地部分の色となります。
色を変更する場合も、昨日のコードに比べて圧倒的に変更しやすいですね^^
２つのconic-gradientでレンガ模様を作る仕組み
今回のbackgroundプロパティでは、３つの層を重ねています。
（最後の「#eeeeee」はbackground-colorと同様の指定となり、最下層をベタ塗りしている色となります。）
その上に２つのconic-gradientがのっている、という構造ですが、それがどうやってレンガ模様になるのか、順を追って解説します。
<div style="width: 40px; height: 40px; border: 1px solid black; background: conic-gradient(#ccaaaa 90deg,transparent 90deg) 0px 0px/40px 40px;"> </div>
まず、「幅40px、高さ40px、1pxの黒いborder（枠線）」のdiv要素を用意し、そこに
「#ccaaaa 90deg,transparent 90deg」という内容のconic-gradientを指定しました。
これは「真上（12時方向）を0度とし、時計回りに90度までは#ccaaaa、90度以降は透明（transparent）」に塗り分ける指定となります。
中心位置は指定しないと「50% 50%（縦も横も真ん中）」と指定するのと同じ事になります。
その後ろに続く、「0px 0px/40px 40px」ですが、これは
「背景の描画を始める位置（background-position）は 0px 0px（左上の角）、背景画像のサイズ（background-size）は40px 40px（縦横40pxというサイズ）」
と指定している事になります。
次に、conic-gradientの中心位置をずらしてみます。
<div style="width: 40px; height: 40px; border: 1px solid black; background: conic-gradient(at 5% 45%,#ccaaaa 90deg,transparent 90deg) 0px 0px/40px 40px;"> </div>
「at 5% 45%,」を追加しました。
これで中心位置が「50% 50%」から「5% 45%（左から画像幅の1/20の位置、上から画像高さの45%の位置）」にズレた事になります。
ちょっと見えてきましたね？
では次に「background-position」に相当する、描画開始位置を変更してみます。
<div style="width: 40px; height: 40px; border: 1px solid black; background: conic-gradient(at 5% 45%,#ccaaaa 90deg,transparent 90deg) 20px 20px/40px 40px;"> </div>
「0px 0px」だった描画開始位置を「20px 20px」に変更しました。
background-sizeが「40px 40px」なので、ちょうど真ん中から開始するように右下に半分ずらした事になります。
…が、左にも色が現れていますね。
今回「background-repeat」を指定していませんが、指定しない場合は「縦も横も繰り返し」が初期値なため、「左隣から溢れてきている」という事になります。
では次に、「描画開始位置が 0px 0px のものと 20px 20px のものを重ねて表示」してみます。
<div style="width: 40px; height: 40px; border: 1px solid black; background:
conic-gradient(at 5% 45%,#ccaaaa 90deg,transparent 90deg) 0px 0px/40px 40px
,conic-gradient(at 5% 45%,#ccaaaa 90deg,transparent 90deg) 20px 20px/40px 40px
;"></div>
…色のない部分は透明（transparent）のため、色の部分だけうまく合成されました。
この２つのconic-gradient、どちらも「繰り返しアリ」なので、このまま要素自体を大きくすると…
<div style="width: 300px; height: 300px; border: 1px solid black; background:
conic-gradient(at 5% 45%,#ccaaaa 90deg,transparent 90deg) 0px 0px/40px 40px
,conic-gradient(at 5% 45%,#ccaaaa 90deg,transparent 90deg) 20px 20px/40px 40px
;"> </div>
先ほどの、縦横40pxの画像を並べて敷き詰める事になり、無事、レンガ模様の背景となりました^^
っと、レンガの目地にあたるスキマ部分、このままではそこだけ透過画像となりますので、
<div style="width: 300px; height: 300px; border: 1px solid black; background:
conic-gradient(at 5% 45%,#ccaaaa 90deg,transparent 90deg) 0px 0px/40px 40px
,conic-gradient(at 5% 45%,#ccaaaa 90deg,transparent 90deg) 20px 20px/40px 40px
,#eeeeee;"> </div>
「#eeeeee（かなり白に近いグレー）」で埋めておきます。
conic-gradient凄い！
「background-size」で繰り返し間隔を、「at」でそのうちどれだけ塗るかを指定できるので、垂直線と水平線で構成した模様ならなんでも作れちゃいそうです！
ちなみに「格子模様」なら、
<div style="width: 300px; height: 300px; border: 1px solid black; background: conic-gradient(at 10% 90%,#ccaaaa 90deg,#eeeeee 90deg) 0px 0px/40px 40px;"> </div>
単一のconic-gradientで表現できます。
あと、conic-gradientの活用例としてググると沢山出てくるのですが、
<div style="width: 300px; height: 300px; border: 1px solid black; background: repeating-conic-gradient(#ccaaaa 0deg 90deg,#aaccaa 90deg 180deg) 0px 0px/40px 40px;"> </div>
「市松模様」もカンタンに作る事ができたりします。
（これはホント紹介されているサイト多くて、このブログでは出すつもりなかった…と言いながら書いてしまいましたｗ）
あとがき
これが出来てしまうとなると…【CSS+SVG】ヘリンボーン模様の背景や、【SVG】紗綾型、なんか…できたっぽい…の垂直水平版（不思議な模様【紗綾形（さやがた）】）も、かなり手間かかりそうですがCSSオンリーで出来てしまいそうですね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
