画像のデザインを再現するにはどうしたらいいですか?
解決したいこと
ここに解決したい内容を記載してください。
下記画像のデザインの右側、正方形の上に画像を上からずらして配置するデザインをHTMLとCSSで再現したいのですが、いくら考えても変な感じになってしまいます。
どなたか、模範例のコードを教えていただけたら嬉しいです。
発生している問題・エラー
### 自分で試したこと
<div class="system_picture">
<div class="container">
<div class="system_picture_box">
<img src="solutions_picture/system.jpg">
</div>
<div class="box"></div>
</div>
</div>
.container {
display: flex;
}
.system_picture_box {
position: absolute;
}
.box {
width: 272px;
height: 272px;
background-color: #E6F0F3;
position: relative;
z-index: -1;
top: -90px;
}
0