Googleでログイン
Twitterでログイン
問題
マルチボーダーを作成してみましょう。
色あいを完璧に見本に合わせなくても大丈夫です。
マルチボーダーのロジックだけ理解できてればOKです。
見本を参考に作成してください。
色あいを完璧に見本に合わせなくても大丈夫です。
マルチボーダーのロジックだけ理解できてればOKです。
見本を参考に作成してください。
期待する画面
解答ソースコード
<div class="background-border"></div>
¥HTML¥
.background-border {
width: 500px;
height: 500px;
background-color: #0e6edf;
background-image: linear-gradient(90deg, rgba(180, 180, 180) 30%, transparent 0%),
linear-gradient(90deg, rgba(242, 245, 245, 1) 30%, transparent 0%),
linear-gradient(90deg, rgba(0, 128, 128, .6) 30%, transparent 0%),
linear-gradient(90deg, rgba(255, 255, 255) 30%, transparent 0%);
background-size: 60px, 30px, 50px, 80px;
}
¥CSS¥
1.HTMLの宣言をしてみよう
解説
次に、background-imageの複数選択できる特性を活かしてlinear-gradientを90deg(縦置きに)で4色ほど並べます。
最後にbackground-sizeを4色分配置させれば完成です。