ﾊﾟｽﾃﾙﾃﾞｲｽﾞ≫CSS実験室

正三角形【css】body{/*正三角形を敷き詰めた背景*/ background-color:pink; background-size:52px 90px; background-position:0 0,0 0,26px 45px,26px 45px background-image: linear-gradient(-60deg,rgba(255,255,255,0.5) 25%, transparent 0), linear-gradient(60deg,rgba(255,255,255,0.5) 25%, transparent 0), linear-gradient(-60deg,rgba(255,255,255,0.5) 25%, transparent 0), linear-gradient(60deg,rgba(255,255,255,0.5) 25%, transparent 0); } 適宜必要なプロパティを追加してください透過処理してあるので『pink』(１箇所)をお好きな色にすれば色を変えられます。また、background-size:の値を変えたら模様の大きさを変えられます。縦横比が1:ルート3(約1.732)になるようにしてください。併せてbackground-position:の値も変えてください。『background-color:pink;』『background-size:52px 90px;』『background-position:background-position:0 0,0 0,26px 45px,26px 45px;』以外でおすすめの値tan 60px 104px 0 0,0 0,30px 52px,30px 52px #ddd 30px 52px 0 0,0 0,15px 26px,15px 26px skyblue 22px 38px 0 0,0 0,11px 19px,11px 19px pxの値が小数にならないよう、正三角形(大)50px 86.6pxと正三角形(小)25px 43.3pxのbackground-size:を変更しました(2024.1.8) TOP≫SUB≫CSS実験室＊前←65→次＃