回答編集履歴
2
追記
test
CHANGED
|
@@ -134,7 +134,7 @@
|
|
|
134
134
|
|
|
135
135
|
linear-gradient(-135deg, blue 50%, transparent 50%);
|
|
136
136
|
|
|
137
|
-
background-repeat: no-repeat;
|
|
137
|
+
background-repeat: no-repeat;/*画像の繰り返しをキャンセル*/
|
|
138
138
|
|
|
139
139
|
}
|
|
140
140
|
|
|
@@ -143,6 +143,14 @@
|
|
|
143
143
|
|
|
144
144
|
|
|
145
145
|
こういう感じの背景画像をCSSで生成して，良い感じに配置すると，枠線付きの三角形になります
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
分かりやすいように，サイズ・位置を変えたもの
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
色違いの背景画像を「少し左右にずらして配置」することで，枠線を表現していることが分かる
|
|
146
154
|
|
|
147
155
|
|
|
148
156
|
|
1
追記
test
CHANGED
|
@@ -143,3 +143,17 @@
|
|
|
143
143
|
|
|
144
144
|
|
|
145
145
|
こういう感じの背景画像をCSSで生成して，良い感じに配置すると，枠線付きの三角形になります
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
---
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
- [CSSのグラデーション（linear-gradient）の使い方を総まとめ！](https://saruwakakun.com/html-css/basic/linear-radial-gradient)
|
|
154
|
+
|
|
155
|
+
- [背景画像を複数設定する](https://qiita.com/tama_go/items/5324dc37c83bff1eaf35)
|
|
156
|
+
|
|
157
|
+
- [background のショートハンドで background-size が設定できない](https://qiita.com/bird_tummy/items/fb3bfe7a0fb20129b9ef)
|
|
158
|
+
|
|
159
|
+
- [backgroundまとめ。ショートハンド、複数指定、各プロパティ](https://qiita.com/katsunory/items/1e952d3f5ab2a0306c4d)
|